Streaming live at 10am (PST)

Anchor link gets current state from mid VH and not on TOP of element when scrolled

Hi guys,

I’ve got the following issue:

I’ve set a sticky “sub” menu called “Scroll Menu” with some anchor links. Anchors are placed on each related div block element.

When I click on an anchor link, the page scrolls to the top of the corresponding div block element as per design. But when I scroll manually to very same element, it already activates the “w–current” class of the anchor link when the upcoming div block element gets past 50% VH.

I would like to add the “w–current” class to the corresponding anchor link only when the corresponding div block approaches the TOP of the screen, not 50% VH. As it is now, clicking on the anchor links scrolls to the top position of the corresponding element as per design but most of the time highlights the wrong anchor link (the one corresponding to the next div block past 50% VH) as I mostly have short div blocks.

I have not found a workaround.

The only possibility I’ve found is using TOC.js (https://projects.jga.me/toc/).

Does anyone else have an idea?
What am I doing wrong?
Before I start setting this up, does TOC works as intended for this user case?

Thanks for your help,
Tom


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Never mind. I found a solution with some javascript.