sticky nav

Author: justinramel

24 - Sticky Nav/index-START.html

@@ -54,7 +54,20 @@ <h1>A story about getting lost.</h1>
   </div>
 
 <script>
-
+  const nav = document.querySelector('#main')
+  const navTop = nav.offsetTop
+
+  window.addEventListener('scroll', fixNav)
+
+  function fixNav () {
+    if (window.scrollY >= navTop) {
+      document.body.style.paddingTop = `${nav.offSetHeight}px`
+      document.body.classList.add('fixed-nav')
+    } else {
+      document.body.style.paddingTop = 0
+      document.body.classList.remove('fixed-nav')
+    }
+  }
 </script>
 
 </body>

24 - Sticky Nav/style-START.css

@@ -84,3 +84,16 @@ nav a {
   transition:all 0.2s;
   text-transform: uppercase;
 }
+
+.fixed-nav nav {
+  position: fixed;
+  box-shadow: 0 5px rgba(0,0,0,0.1)
+}
+
+.fixed-nav li.logo {
+  max-width: 500px
+}
+
+body.fixed-nav .site-wrap {
+  transform: scale(1);
+}