Sticky header

KordonDev · KordonDev · commit 56f0dd9cfc24 · 2017-01-19T21:30:21.000+01:00
diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
@@ -55,6 +55,21 @@ <h1>A story about getting lost.</h1>
 
 <script>
 
+    const nav = document.querySelector('#main');
+    const navTop = nav.offsetTop;
+
+    function isFixed() {
+        if (navTop >= window.scrollY) {
+            document.body.classList.remove('fixed');
+            document.body.style.paddingTop = 0;
+        } else {
+            document.body.classList.add('fixed');
+            document.body.style.paddingTop = nav.offsetHeight + 'px';
+        }
+    }
+
+    document.addEventListener('scroll', isFixed);
+
 </script>
 
 </body>
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
@@ -46,6 +46,10 @@ nav {
   transition:all 0.5s;
   position: relative;
   z-index: 1;
+
+}
+.fixed nav {
+  position: fixed;
 }
 
 nav ul {
@@ -72,6 +76,10 @@ li.logo {
   font-size: 30px;
 }
 
+.fixed .logo {
+    max-width: 500px;
+}
+
 li.logo a {
   color:black;
 }
