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

diff --git a/resources/assets/js/pages/page-show.js b/resources/assets/js/pages/page-show.js
index 3693031fbf4da14d29f5e6f87b4f083968cf44ef..02958017c113ff3fcc4db2201d2dcdcb35899140 100644 (file)
--- a/resources/assets/js/pages/page-show.js
+++ b/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 = {
           // 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');
               threshold: 1.0
           }
           $pageNav = $('.sidebar-page-nav');


@@ -189,22 +189,24 @@ let setupPageShow = window.setupPageShow = function (pageId) {
       }
 
       function cbHeadingVisible(entries, observer) {
       }
 
       function cbHeadingVisible(entries, observer) {

-          let element = null;

           for (let i = 0; i !== entries.length; ++i) {
               let currentEntry = entries[i];
           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
               // 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 {
               } 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');

       }
     }
 };
       }
     }
 };

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 0f755e9f0cf10bbda66ba50e2aa7bf081af6d17e..4cef2cebdf1510e3657955556df5792d1d5c9775 100644 (file)
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -135,7 +135,7 @@ body.flexbox {
     width: 30%;
     left: 0;
     height: 100%;
     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;
     -ms-overflow-style: none;
     //background-color: $primary-faded;
     border-left: 1px solid #DDD;