Dynamic Table of Contents - NO CMS

Design help Custom code
1

Hi all,

I’m working on a portfolio website right now and I am trying to re-create a dynamic table of contents that update an active state when a section comes into view during scrolling of the page.

My styling looks exactly like the one on IBM’s website: IBM watsonx.ai

I can’t seem to figure out how to get the blue div I created to animate with the section-id’s. I have found multiple online resources with code instructions but they seem to all be for CMS pages, which I don’t want. Is there a way to hard code it without headings being generated? I’ve already tried using Webflow’s scrolling interactions but it doesn’t line up exactly and I don’t want easing…

2

Finsweet’s ToC does this, and if you want all of the ToC items at the same level the way they appear on the IBM site, you can just use H2 headings throughout your text.

Note that setting the style of the selected item can be confusing, so I wrote a basic guide here;