Beef
Pork
Lamb
Somethin
Pork
🥩
User scrolled to 'pork'
User scrolled to the 'Pork' section, scrollSpy detects this and
highlight the appropriate link in the navigation bar.
Cut
Beef
Pork
Lamb
Pork
🥩
Parents
Control line
Somethin
Beef
Pork
Lamb
Pork
🥩
'top' is over the control line
Somethin
'bottom' is under
const { height, top } =
document.getElementById('pork')
.getBoundingClientRect();
const bottom = top + height;
Beef
Pork
Lamb
Pork
🥩
what if line would be between two parent blocks? Or under the last one?
Somethin
Link is not active
Beef
Pork
Lamb
Pork
🥩
Control zone
Somethin
Beef
Pork
Lamb
Pork
🥩
Detects income
Somethin
Beef
Pork
Lamb
Pork
🥩
Detects outcome
Somethin
Beef
Pork
Lamb
Pork
🥩
Detects situation
with two nodes inside & selects the last one
Somethin
* control area must be bigger than possible margins
Beef
Pork
Lamb
Lamb
🥩
Somethin
Something
🥩
Footer
Actually last link should be highlighted
But it's impossible to scroll more, as we already reached the footer
Beef
Pork
Lamb
Lamb
🥩
Somethin
Something
🥩
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;
}