Beef
Pork
Lamb
Somethin
🥩
User scrolled to 'pork'
User scrolled to the 'Pork' section, scrollSpy detects this and
highlight the appropriate link in the navigation bar.
Cut
Parents
Control line
'top' is over the control line
'bottom' is under
const { height, top } = document.getElementById('pork') .getBoundingClientRect(); const bottom = top + height;
what if line would be between two parent blocks? Or under the last one?
Link is not active
Control zone
Detects income
Detects outcome
Detects situation
with two nodes inside & selects the last one
* control area must be bigger than possible margins
Something
Footer
Actually last link should be highlighted
But it's impossible to scroll more, as we already reached the footer
Buffer zone. When user reach it, last link becomes active.
// Max Page Height const body = document.body; const html = document.documentElement; const max = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); if (max - scrollY < window.innerHeight + BUFFER_ZONE_HEIGHT) { currentElement = categoriesObj[categoriesObj.length - 1].id; }
By Serge Zdobnov
How to create your own scrollSpy. Not perfect and not the best one, but with minimal cost.
