Highlights all headings currently visible. Also fixes extra scrollbar appearing in Firefox.

resources/assets/js/pages/page-show.js

@@ -176,7 +176,7 @@ let setupPageShow = window.setupPageShow = function (pageId) {
           // margin top = -35px to trigger the threshold change before the heading
           // has completely left the viewport on the top.
           let intersectOpts = {
-              rootMargin: '-35px 0px 0px 0px',
+              rootMargin: '0px 0px 0px 0px',
               threshold: 1.0
           }
           $pageNav = $('.sidebar-page-nav');
@@ -189,22 +189,24 @@ let setupPageShow = window.setupPageShow = function (pageId) {
       }
 
       function cbHeadingVisible(entries, observer) {
-          let element = null;
           for (let i = 0; i !== entries.length; ++i) {
               let currentEntry = entries[i];
+              let element = currentEntry.target;
               // check if its currently visible and its distance from top of viewport is less than 100
-              if (currentEntry.intersectionRatio <= 1 && currentEntry.boundingClientRect.y < 100) {
-                  element = currentEntry.target;
+              if (currentEntry.intersectionRatio === 1) {
+                  highlightElement(element.id);
               } else {
-                  break;
+                  removeHighlight(element.id);
               }
           }
-          if (!element) {
-              return;
-          }
-          let elementId = element.id;
-          $pageNav.find('a').removeClass('current-heading');
-          $pageNav.find('a[href="#' + elementId + '"]').addClass('current-heading');
+      }
+
+      function highlightElement(elementId) {
+        $pageNav.find('a[href="#' + elementId + '"]').addClass('current-heading');
+      }
+
+      function removeHighlight(elementId) {
+          $pageNav.find('a[href="#' + elementId + '"]').removeClass('current-heading');
       }
     }
 };

resources/assets/sass/_grid.scss

@@ -135,7 +135,7 @@ body.flexbox {
     width: 30%;
     left: 0;
     height: 100%;
-    overflow-y: scroll;
+    overflow-y: auto;
     -ms-overflow-style: none;
     //background-color: $primary-faded;
     border-left: 1px solid #DDD;