Scroll-based features tend to involve some bespoke concoction of CSS and JavaScript. But what if we could accomplish something that only uses CSS?
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).