sticky header

assets/js/st-nav.js

@@ -1,3 +1,5 @@
+//Nav slide in logic
+
 const nav = document.querySelector('.st-nav');
 const openButton = document.querySelector('.st-open-nav');
 const closeButton = document.querySelector('.st-close-nav');
@@ -10,10 +12,24 @@ closeButton.addEventListener('click', () => {
     nav.classList.remove('st-nav-is-open');
 });
 
+//Sticky nav logic
+
+const iconBar = document.querySelector('.st-header-icon-bar');
+const siteTitle = document.querySelector('.st-site-title');
 let lastScrollPosition = 0;
 
 window.addEventListener('scroll', function(event) {
     const scrollPosition = window.scrollY;
-    console.log(scrollPosition);
+
+    if(scrollPosition < 5) {
+        iconBar.classList.remove('st-icon-bar-sticky');
+        siteTitle.classList.remove('st-title-scrolled');
+    } else {
+        if(lastScrollPosition < 5) {
+            iconBar.classList.add('st-icon-bar-sticky');
+            siteTitle.classList.add('st-title-scrolled');
+        } 
+    }
+    
     lastScrollPosition = scrollPosition;
 });

header.php

@@ -32,7 +32,6 @@
         
         <h1 class="st-site-title">Slowtwitch</h1>
 
-
         <nav class="st-nav st-main-grid">
             <button class="st-nav-btn st-close-nav" aria-label="Close Navigation">&times;</button>
             <?php

style.css

@@ -42,6 +42,13 @@ h1 {
     text-align: center;
     margin-top: 0;
     font-size: 3.3rem;
+    transform: scale(1, 1) translateX(0);
+    transition: all 300ms;
+    transform-origin: top left;
+}
+
+.st-title-scrolled {
+    transform: scale(0,0);
 }
 
 /*
@@ -66,8 +73,13 @@ SECTIONS
 */
 
 /* header bar */
+.st-header {
+    position: sticky;
+    top: 0;
+}
 
 .st-header-icon-bar {
+    width: 100%;
     display: flex;
     justify-content: space-between;
     color: black;
@@ -84,10 +96,22 @@ SECTIONS
     color: black;
 }
 
+.st-icon-bar-sticky a {
+    display: none;
+}
+
+.st-icon-bar-sticky .st-open-nav {
+    border-radius: 20%;
+    padding: .1em .4em;
+    background: #fff;
+    box-shadow: 0 0 3px rgb(0 0 0 / 30%);
+    margin-left: auto;
+}
+
 /* nav */
 
 .st-nav {
-    position: absolute;
+    position: fixed;
     background: #fff;
     width: 100%;
     top: 0;
@@ -99,10 +123,6 @@ SECTIONS
     grid-template-rows: minmax(2.25rem, 3rem) 1fr;
 }
 
-.st-nav-sticky {
-
-}
-
 .st-nav-is-open {
     transform: translateX(100%);
 }