Take this ingenious horizontal scrollbar with CSS, for instance. I want to do something similar, but to indicate scrolled sections rather than capture continuous scrolling. In other words, rather than increasing the length of the indicator during scroll, I only want to increase the length when a certain section of the page has been reached.
Here’s a demo showing the end result: the scroll indicator does not update continuously but is stepped.
See the Pen CSS Scrolled Sections Indicator by Preethi Sam (@rpsthecoder) on CodePen.
The technique involved uses
position: sticky; and some positioning applied on each “passageStop” (one per step).