From: Abijeet <redacted>
Date: Tue, 14 Nov 2017 18:24:25 +0000 (+0530)
Subject: Highlights all headings currently visible. Also fixes extra scrollbar appearing in... 
X-Git-Tag: v0.19.0~1^2~11^2~2
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/8378f068892a51bc456e1dcb65dda34a86d240a7?ds=inline;hp=--cc

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

8378f068892a51bc456e1dcb65dda34a86d240a7
diff --git a/resources/assets/js/pages/page-show.js b/resources/assets/js/pages/page-show.js
index 3693031fb..02958017c 100644
--- 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 = {
-              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');
       }
     }
 };
diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 0f755e9f0..4cef2cebd 100644
--- a/resources/assets/sass/_grid.scss
+++ b/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;