24 sticky nav --kb

Kyle Bradshaw · Kyle Bradshaw · commit dd8a5dcd0436 · 2017-01-29T18:57:09.000-05:00
diff --git a/24 - Sticky Nav/index.html b/24 - Sticky Nav/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Sticky Nav</title>
-  <link rel="stylesheet" href="style-START.css">
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
 
@@ -55,7 +55,24 @@ <h1>A story about getting lost.</h1>
 
 <script>
 
+const nav = document.querySelector('#main');
+const topOfNav = nav.offsetTop;
+
+function fixNav() {
+  console.log(topOfNav, window.scrollY, nav.offsetHeight);
+  if (window.scrollY >= topOfNav) {
+    document.body.style.paddingTop = `${nav.offsetHeight}px`;
+    document.body.classList.add('fixed-nav');
+    //causes it to be janky (no nav in dom) offset amt on body
+  } else {
+    document.body.style.paddingTop = 0;
+    document.body.classList.remove('fixed-nav');
+
+  }
+}
+
+window.addEventListener('scroll', fixNav);
 </script>
 
 </body>
-</html>
+</html>
diff --git a/24 - Sticky Nav/style.css b/24 - Sticky Nav/style.css
@@ -23,6 +23,10 @@ body {
   transition: transform 0.5s;
 }
 
+.fixed-nav .site-wrap {
+  transform: scale(1);
+}
+
 header {
   text-align: center;
   height:50vh;
@@ -47,6 +51,10 @@ nav {
   position: relative;
   z-index: 1;
 }
+.fixed-nav nav {
+  position: fixed;
+  box-shadow: 0 5px rgba(0,0,0,0.1);
+}
 
 nav ul {
   margin: 0;
@@ -64,14 +72,18 @@ nav li {
 }
 
 li.logo {
-  max-width:0;
+  max-width:0;/*because transitions*/
   overflow: hidden;
   background: white;
   transition: all .5s;
   font-weight: 600;
   font-size: 30px;
 }
 
+.fixed-nav li.logo {
+  max-width: 500px; /*because transitions*/
+}
+
 li.logo a {
   color:black;
 }
