Keep nav item anchor links "current" across multiple sections

I have my full page organized in a quick stack. I have navigation down the page using anchor links on the left column of the page. I’m using IDs to connect each navigation item as an anchor link to a section on the page, allowing users to jump to sections down the page. As a user scrolls down, I want each navigation item to become bold as that section enters the viewport, to indicate what section you’re currently reading. (This is a good example: How to Build Profitable Niche Sites (in 2020) - Jim from Income School)

The issue is that the navigation items are only showing as “current” or active when the very first cell of each section is displayed. For example, Product Analysis. When that header is in the viewport, the nav item is “current”. But once you scroll down to paragraphs farther down in that section, the navigation item is no longer “current” because it is only linked to the ID on the first cell. I want that nav item to appear current for the WHOLE section.

I explored moving the content for each section-- Background, Product Analysis etc.-- all into ONE cell so that they could each be in ONE section, with the ID linked to the full section. This would solve the problem. However, I have items displayed side by side within each content section, and moving them out of the individual cells/rows into ONE section inside ONE cell would mess up the nice column alignment I get from them each living in separate cells in the quick stack.

I also explored having each of the 5 sections live in its own quick stack, but then I can’t merge the side navigation cell across all rows down the page, so that it would stay sticky at the top of the screen.

Thanks so much for any help!


Here is my site Read-Only: Webflow - Portfolio V3

Ideally you would have multiple quick stacks on the page and then apply an interaction (on scroll into view / on scroll out of view) to that section to make each respective nav item bold. It sounds like a lot of work but that would probably be the fastest way and easier to manage going forward.

If you don’t want to do that, you could try merging cells horizontally, then adding a new quick stack inside of that where you setup the columns you want. Then apply the on scroll into view / on scroll out of view to each quick stack.

Thanks Jonathan! I actually was able to sort it out by moving the horizontally aligned elements into flex blocks, with each item inside sharing 50% of the available space, and then combining each section into one cell each (so 5 sections total). Now the nav links are recognizing each section entirely by the ID.
https://preview.webflow.com/preview/portfolio-v3-d20d21?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-v3-d20d21&preview=3900b655881bde06f9e9c25ff2ee9e92&pageId=66708fc0dbf9eff22ba0b793&workflow=preview