update reactivity of menu on scroll

webpack/js/main.js

@@ -11,42 +11,81 @@ $(document).ready(function () {
     patchAssetIntoDom('/assets/logos/products/open_source.svg');
 
     // Check for click events on the navbar burger icon
-    $(".navbar-burger").click(function() {
+    $(".navbar-burger").click(function () {
         // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
         $(".navbar-burger").toggleClass("is-active");
         $(".navbar-menu").toggleClass("is-active");
     });
 
-    $(".navbar-item.has-dropdown").click(function() {
+    $(".navbar-item.has-dropdown").click(function () {
         if ($(".navbar-burger").is(':visible')) {
             $(this).toggleClass("is-active");
         }
     });
-    $(".navbar-item > .navbar-link").click(function(e) {
+    $(".navbar-item > .navbar-link").click(function (e) {
         if ($(".navbar-burger").is(':visible')) {
             e.preventDefault();
         }
     });
-    $(window).resize(function() {
+    $(window).resize(function () {
         if (!$(".navbar-burger").is(':visible') && $(".navbar-item.has-dropdown.is-active").length) {
             $(".navbar-item.has-dropdown.is-active").removeClass('is-active');
         }
     });
 
-    // Internal Navigation for table of contents and table of progress component
-    let hash = window.location.hash;
-    if (hash.length > 0) {
-        $('.menu-list').find('a[href=\"' + hash + '\"]').addClass('is-active');
-        $('.step').find('a[href=\"' + hash + '\"]').find('.number').addClass('is-active');
-    }
+    $(window).scroll(function () {
+        // Get container scroll position
+        var fromTop = $(this).scrollTop() + topMenuHeight;
+
+        // Get id of current scroll item
+        var cur = scrollItems.map(function () {
+            if ($(this).offset().top < fromTop)
+                return this;
+        });
+        // Get the id of the current element
+        cur = cur[cur.length - 1];
+        var id = cur && cur.length ? cur[0].id : "";
+
+        console.log(window.location.pathname);
+        if (lastId !== id) {
+            lastId = id;
+            // Set/remove active class
+            id = '#' + id;
+            $('.menu-list a[href*="#"]').closest('a').removeClass('is-active');
+            $('.menu-list').find('a[href=\"' + id + '\"]').addClass("is-active");
+            $('.step a[href*="#"]').closest('a').find('.number').removeClass('is-active');
+            $('.step').find('a[href=\"' + id + '\"]').find('.number').addClass('is-active');
+        }
+    });
+
+    // Cache selectors
+    var lastId
+
+    if(window.location.pathname == '/cc-search/contribution-guide/')
+        var topMenu = $(".step")
+    else
+        topMenu = $(".menu-list")
 
-    $(window).on('hashchange', function() {
-        let hash = window.location.hash;
-        $('.menu-list a[href*="#"]').closest('a').removeClass('is-active');
-        $('.menu-list').find('a[href=\"' + hash + '\"]').addClass('is-active');
+    var topMenuHeight = topMenu.outerHeight() + 1,
+        // All list items
+        menuItems = topMenu.find('a[href*="#"]'),
+        // Anchors corresponding to menu items
+        scrollItems = menuItems.map(function () {
+            var item = $($(this).attr("href"));
+            if (item.length) {
+                return item;
+            }
+        });
 
-        $('.step a[href*="#"]').closest('a').find('.number').removeClass('is-active');
-        $('.step').find('a[href=\"' + hash + '\"]').find('.number').addClass('is-active');
+    // Bind click handler to menu items
+    // so we can get a fancy scroll animation
+    menuItems.click(function (e) {
+        var href = $(this).attr("href"),
+            offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 1;
+        $('html, body').stop().animate({
+            scrollTop: offsetTop
+        }, 850);
+        e.preventDefault();
     });
 });
 
@@ -70,5 +109,4 @@ const patchAssetIntoDom = (asset, version = null) => {
     }
 
     ajax.send();
-}
-
+}