Add scroll spy

docs/lib/main.js

@@ -35,16 +35,31 @@ document.addEventListener('DOMContentLoaded', function () {
   var anchors_el = document.getElementById('anchors');
   var anchor_links_el = getAll('.bd-anchor-link');
 
+  var anchors_by_id = {};
+  var anchors_order = [];
+  var anchor_nav_els = [];
+
   if (anchors_el && anchor_links_el.length > 0) {
     var anchors_el_list = anchors_el.querySelector('.bd-anchors-list');
 
-    anchor_links_el.forEach(function (el) {
+    anchor_links_el.forEach(function (el, index) {
       var link_target = el.getAttribute('href');
       var link_text = el.previousElementSibling.innerText;
 
       if (link_text != '') {
         var item_el = createAnchorLink(link_text, link_target);
         anchors_el_list.appendChild(item_el);
+
+        var anchor_key = link_target.substring(1); // #target -> target
+        anchors_by_id[anchor_key] = {
+          id: anchor_key,
+          index: index,
+          target: link_target,
+          text: link_text,
+          nav_el: item_el
+        };
+        anchors_order.push(anchor_key);
+        anchor_nav_els.push(item_el);
       }
     });
 
@@ -274,18 +289,76 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   });
 
-  function whenScrolling(lastY, currentY) {
+  // Anchors highlight
+
+  var past_anchors = [];
+  anchor_links_el.reverse();
+  var trigger_offset = 24; // In pixels
+  var typo_el = document.getElementById('typo');
+
+  function whenScrolling() {
     if (anchors_ref_el) {
       var bounds = anchors_ref_el.getBoundingClientRect();
+      var anchors_height = anchors_el.clientHeight;
+      var typo_bounds = typo_el.getBoundingClientRect();
+      var typo_height = typo_el.clientHeight;
 
-      if (bounds.top < 1) {
+      if (bounds.top < 1 && typo_bounds.top - anchors_height + typo_height > 0) {
         anchors_el.classList.add('is-pinned');
       } else {
         anchors_el.classList.remove('is-pinned');
       }
+
+      anchor_links_el.some(function (el) {
+        var bounds = el.getBoundingClientRect();
+        var href = el.getAttribute('href');
+        var key = href.substring(1); // #target -> target
+
+        if (bounds.top < 1 + trigger_offset && past_anchors.indexOf(key) == -1) {
+          past_anchors.push(key);
+          highlightAnchor();
+          return;
+        } else if (bounds.top > 0 + trigger_offset && past_anchors.indexOf(key) != -1) {
+          removeFromArray(past_anchors, key);
+          highlightAnchor();
+          return;
+        }
+      });
     }
   }
 
+  function highlightAnchor() {
+    var future_anchors = anchors_order.diff(past_anchors);
+    var highest_index = -1;
+    var highest_anchor_key = '';
+
+    if (past_anchors.length > 0) {
+      past_anchors.forEach(function (key, index) {
+        var anchor = anchors_by_id[key];
+        anchor.nav_el.className = 'is-past';
+
+        // Keep track of the bottom most item
+        if (anchor.index > highest_index) {
+          highest_index = anchor.index;
+          highest_anchor_key = key;
+        }
+      });
+
+      if (highest_anchor_key in anchors_by_id) {
+        anchors_by_id[highest_anchor_key].nav_el.className = 'is-current';
+      }
+    }
+
+    if (future_anchors.length > 0) {
+      future_anchors.forEach(function (key, index) {
+        var anchor = anchors_by_id[key];
+        anchor.nav_el.className = '';
+      });
+    }
+  }
+
+  // Scroll
+
   function upOrDown(lastY, currentY) {
     if (currentY >= lastY) {
       return goingDown(currentY);
@@ -362,7 +435,7 @@ document.addEventListener('DOMContentLoaded', function () {
     if (!ticking) {
       window.requestAnimationFrame(function () {
         // upOrDown(lastY, currentY);
-        whenScrolling(lastY, currentY);
+        whenScrolling();
         ticking = false;
         lastY = currentY;
       });
@@ -370,4 +443,21 @@ document.addEventListener('DOMContentLoaded', function () {
 
     ticking = true;
   });
+
+  // Utils
+
+  function removeFromArray(array, value) {
+    if (array.includes(value)) {
+      var value_index = array.indexOf(value);
+      array.splice(value_index, 1);
+    }
+
+    return array;
+  }
+
+  Array.prototype.diff = function (a) {
+    return this.filter(function (i) {
+      return a.indexOf(i) < 0;
+    });
+  };
 });