Added notes and solution for Project 24 - Sticky Nav Bar

lisaychuang · Jun 12, 2018 · 4408d8f · 4408d8f
1 parent ea18fe6
commit 4408d8f
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 3 deletions.
diff --git a/24 - Sticky Nav/index-projectnotes.html b/24 - Sticky Nav/index-projectnotes.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-projectnotes.css">
 </head>
 <body>
 
@@ -54,6 +54,27 @@ <h1>A story about getting lost.</h1>
   </div>
 
 <script>
+    // get nav element
+    const nav = document.querySelector('#main');
+
+    // fix Nav to top of window
+    function fixNav(){
+        const topOfNav = nav.offsetTop;  
+
+        // if we scroll past Nav's top edge, add a className to body
+        if (window.scrollY > topOfNav){
+            document.body.classList.add('fixed-nav'); 
+
+            // account for nav's fixed position, add padding to body
+            document.body.style.paddingTop = nav.offsetHeight; 
+        } else {
+            document.body.classList.remove('fixed-nav');
+            document.body.style.paddingTop = 0; 
+        };  
+    };
+
+    // event handler for scrolling
+    window.addEventListener('scroll', fixNav);
 
 </script>
 

diff --git a/24 - Sticky Nav/style-projectnotes.css b/24 - Sticky Nav/style-projectnotes.css
@@ -22,7 +22,12 @@ html {
     transform: scale(0.98);
     transition: transform 0.5s;
   }
-
+
+  /* when fixed nav, change the scale of site-wrap div to 100% */
+  .fixed-nav .site-wrap{
+      transform: scale(1);
+  }
+
   header {
     text-align: center;
     height:50vh;
@@ -47,6 +52,14 @@ html {
     position: relative;
     z-index: 1;
   }
+
+  /* Style to fix nav bar */
+  /* when an element position is FIXED, 
+    it is no longer part of paget */
+  .fixed-nav nav {
+      position: fixed;
+      box-shadow: 0 5px rgba(0,0,0,0.1);
+  }
 
   nav ul {
     margin: 0;
@@ -71,6 +84,13 @@ html {
     font-weight: 600;
     font-size: 30px;
   }
+
+  /* when we scroll past nav, set logo max-width to transition in
+  note: CSS transition works for max-width, not width
+  also requires a set max-width, can't use auto */
+  .fixed-nav li.logo {
+      max-width: 500px;
+  }
 
   li.logo a {
     color:black;

diff --git a/readme.md b/readme.md
@@ -1082,4 +1082,37 @@ When the `stopButton` is clicked, the event handler will execute the `toggle()`
 
 i.e. `toggle(false)` which will call `speechSynthesis.cancel()` method to stop speech utterance.
 
-
+
+## Project 24: Sticky Nav Bar
+
+They key takeaway for this project was the need to account for nav bar height (`offsetHeight`) when we fix it to the top of page, and CSS tweaks.
+
+### Fix Nav Bar
+When user scroll past nav bar, we:
+
+- added a `class` to `<body>` element
+- account for nav bar's height by adding padding to `<body>`:
+```js 
+document.body.style.paddingTop = nav.offsetHeight; 
+```
+
+- updated CSS for `.fixed-nav nav`: change `position` from `relative` to `fixed`
+
+### Logo Transition Animation
+Note that CSS transitions do not work on auto dimensions!  Here's a great article by Brandon Smith, [Using CSS Transitions on Auto Dimensions](https://css-tricks.com/using-css-transitions-auto-dimensions/)
+- updated CSS for `.fixed-nav li.logo`: change `max-width: 500px`
+
+### Scale Up Content
+Here, Wes scaled up the content (wrapped in `<div> `with class name `site-wrap`):
+- updated CSS for `.fixed-nav .site-wrap`: change `transform` scale from 0.98 to 1
+
+The [`scale()` CSS function](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale) defines a transformation that resizes an element on the 2D plane. The amount of scaling is defined by a vector, so it can resize the horizontal and vertical dimensions at different scales.
+
+Syntax: 
+```js
+scale(sx)  
+// sx: A number representing the abscissa of the scaling vector.
+
+scale(sx, sy)
+// sy: A number representing the ordinate of the scaling vector. If not defined, its default value is sx, resulting in a uniform scaling that preserves the element's aspect ratio.
+```