Indicating Scroll Position on a Page With CSS

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).

Indicating Scroll Position on a Page With CSS →

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.