finished sticky header

codepandit · Jan 13, 2018 · 04eef11 · 04eef11
1 parent 322c892
commit 04eef11
Show file tree

Hide file tree

Showing 6 changed files with 423 additions and 7 deletions.
diff --git a/app/assets/scripts/modules/StickyHeader.js b/app/assets/scripts/modules/StickyHeader.js
@@ -1,11 +1,20 @@
 import $ from 'jquery';
 import waypoints from '../../../../node_modules/waypoints/lib/noframework.waypoints';
+import smoothScroll from 'jquery-smooth-scroll';
 
 class StickyHeader {
   constructor() {
     this.siteHeader = $(".site-header");
     this.headerTriggerElement = $(".large-hero__title");
     this.createHeaderWaypoint();
+    this.pageSections = $(".page-section");
+    this.headerLinks = $(".primary-nav a");
+    this.createPageSectionWaypoints();
+    this.addSmoothScrolling();
+  }
+
+  addSmoothScrolling() {
+    this.headerLinks.smoothScroll();
   }
 
   createHeaderWaypoint() {
@@ -21,6 +30,36 @@ class StickyHeader {
       }
     });
   }
+
+  createPageSectionWaypoints() {
+    var that = this;
+    this.pageSections.each(function() {
+      var currentPageSection = this;
+      new Waypoint({
+        element: currentPageSection,
+        handler: function(direction) {
+          if (direction == "down") {
+            var matchingHeaderLink = currentPageSection.getAttribute("data-matching-link");
+            that.headerLinks.removeClass("is-current-link");
+            $(matchingHeaderLink).addClass("is-current-link");
+          }
+        },
+        offset: "18%"
+      });
+
+      new Waypoint({
+        element: currentPageSection,
+        handler: function(direction) {
+          if (direction == "up") {
+            var matchingHeaderLink = currentPageSection.getAttribute("data-matching-link");
+            that.headerLinks.removeClass("is-current-link");
+            $(matchingHeaderLink).addClass("is-current-link");
+          }
+        },
+        offset: "-40%"
+      });
+    });
+  }
 }
 
 export default StickyHeader;
diff --git a/app/assets/styles/modules/_primary-nav.css b/app/assets/styles/modules/_primary-nav.css
@@ -48,6 +48,10 @@
       font-size: 1rem;
       padding: 12px 0;
       background-color: transparent;
+
+      &.is-current-link {
+        color: #fabb69;
+      }
     }
   }
 }
diff --git a/app/index.html b/app/index.html
@@ -28,9 +28,9 @@
         </div>
         <nav class="primary-nav primary-nav--pull-right">
           <ul>
-            <li><a href="#our-beginning">Our Beginning</a></li>
-            <li><a href="#features">Features</a></li>
-            <li><a href="#testimonials">Testimonials</a></li>
+            <li><a href="#our-beginning" id="our-beginning-link">Our Beginning</a></li>
+            <li><a href="#features" id="features-link">Features</a></li>
+            <li><a href="#testimonials" id="testimonials-link">Testimonials</a></li>
           </ul>
         </nav>
       </div>
@@ -56,7 +56,7 @@ <h2 class="large-hero__subtitle">One trip away.</h2>
     </div>
   </div>
 
-  <div id="our-beginning" class="page-section">
+  <div id="our-beginning" class="page-section" data-matching-link="#our-beginning-link">
     <div class="wrapper">
       <h2 class="headline headline--centered headline--light headline--b-margin-small">The first trip we planned <strong>was our own.</strong></h2>
       <h3 class="headline headline--centered headline--orange headline--small headline--narrow headline--light headline--b-margin-large">Ever since, we&rsquo;ve been working to make travel <strong>better for everyone.</strong></h3>
@@ -85,7 +85,7 @@ <h2 class="headline headline--no-t-margin">Here&rsquo;s how we got started&helli
     </div>
   </div>
 
-  <div id="features" class="page-section page-section--blue">
+  <div id="features" class="page-section page-section--blue" data-matching-link="#features-link">
     <div class="wrapper">
       <h2 class="section-title"><span class="icon icon--star section-title__icon"></span> Our <strong>Features</strong></h2>
 
@@ -124,7 +124,7 @@ <h3 class="feature-item__title">Survival Kit</h3>
     </div>
   </div>
 
-  <div id="testimonials" class="page-section page-section--no-b-padding-until-large page-section--testimonials">
+  <div id="testimonials" class="page-section page-section--no-b-padding-until-large page-section--testimonials" data-matching-link="#testimonials-link">
     <div class="wrapper wrapper--no-padding-until-large">
       <h2 class="section-title section-title--blue"><span class="icon icon--comment section-title__icon"></span> Real <strong>Testimonials</strong></h2>