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

This commit is contained in:
Abijeet 2017-11-14 23:54:25 +05:30
parent bdba25b6f2
commit 8378f06889
2 changed files with 14 additions and 12 deletions

View File

@ -176,7 +176,7 @@ let setupPageShow = window.setupPageShow = function (pageId) {
// margin top = -35px to trigger the threshold change before the heading // margin top = -35px to trigger the threshold change before the heading
// has completely left the viewport on the top. // has completely left the viewport on the top.
let intersectOpts = { let intersectOpts = {
rootMargin: '-35px 0px 0px 0px', rootMargin: '0px 0px 0px 0px',
threshold: 1.0 threshold: 1.0
} }
$pageNav = $('.sidebar-page-nav'); $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) { for (let i = 0; i !== entries.length; ++i) {
let currentEntry = entries[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) { if (currentEntry.intersectionRatio === 1) {
element = currentEntry.target; highlightElement(element.id);
} else { } else {
break; removeHighlight(element.id);
} }
} }
if (!element) { }
return;
} function highlightElement(elementId) {
let elementId = element.id; $pageNav.find('a[href="#' + elementId + '"]').addClass('current-heading');
$pageNav.find('a').removeClass('current-heading'); }
$pageNav.find('a[href="#' + elementId + '"]').addClass('current-heading');
function removeHighlight(elementId) {
$pageNav.find('a[href="#' + elementId + '"]').removeClass('current-heading');
} }
} }
}; };

View File

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