PHPnews.io

Indicating Scroll Position on a Page With CSS

Written by Bram.us / Original link on Mar. 25, 2020

sticky-indicator-2.png

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 →

bram link tutorialzine scrolling bram

« Fun with browsers: how to get an image into the current page - RSS Feeds for GitHub Project Releases and User Activity »