Indicating Scroll Place on a Web page With CSS

Scrolling is one thing everyone knows and do on the internet to the extent that it’s an expectation or maybe even a behavior, like brushing our enamel. That’s most likely why we don’t put an excessive amount of thought into designing the scrolling expertise — it’s a widely known fundamental operate. Actually, the favored “there is no such thing as a fold” saying comes from the concept folks know learn how to scroll and there’s no arbitrary line that folks don’t go underneath.

Scroll-based options are inclined to contain some bespoke concoction of CSS and JavaScript. That’s as a result of there merely aren’t that many native options out there to do it. However what if we may accomplish one thing that solely makes use of CSS? 

Take this ingenious horizontal scrollbar with CSS, as an example. I wish to do one thing related, however to point scrolled sections quite than seize steady scrolling. In different phrases, quite than rising the size of the indicator throughout scroll, I solely wish to improve the size when a sure part of the web page has been reached.

Like this:

CodePen Embed Fallback

Right here’s my plan: Every part carries an indicator that’s undetectable till it reaches the highest of the display screen. That’s the place it turns into seen by altering colour and sticks to the highest of the viewport.

The precise reverse ought to occur in reverse: the indicator will comply with alongside when scrolling again up the display screen, camouflaging itself again to being undetected to the bare eye.

There are two key components to this. The primary is for the indicator to alter colour when it’s close to the highest of the display screen. The second is for the indicator to remain put on the high of the display screen and are available down solely when its part is scrolled all the way down to.

The second is simple to do: we use place: sticky; on our components. When a web page is scrolled, a sticky aspect sticks to a given place on the display screen inside its father or mother container.

CodePen Embed Fallback

That brings us to altering colours. For the reason that background of an HTML doc is white by default, I’m protecting white as the bottom colour for the demo. This implies the indicator ought to look white when it’s over the bottom colour and switch to another colour when it’s over the indicator bar on the high of the display screen.

The dashed indicator is at the moment invisible, however turns into seen when it sticks to the highest and blends with the background colour of the indicator container.

That is the place CSS mix modes come into play. They provide us so many choices to create quite a lot of colour amalgams. I’m going to go along with the overlay worth. This one is kind of dynamic in nature. I received’t clarify the mix in depth (as a result of the CSS-Tips Alamanac already does a superb job of that) however taking this demo into consideration, I’ll say this: when the background colour is white the ensuing foreground colour is white; and when the background is another colour, the ensuing colour is darker or lighter, relying on the colour it’s combined with.

The indicator stops within the demo are black. However, due to the mix, we see them as white as a result of they’re on a white background. And when they’re over the indicator container aspect, which is a beautiful shade of violet, we see a darkish violet indicator cease, as a result of we’re mixing the indicator cease’s black with the indicator container’s violet.

Beginning with the HTML:

  Sections Scrolled ↴




Fairly easy, proper? There’s a sticky container on the very high that holds the indications after they attain the highest.  From there, we have now three sections of content material, every one topped with an indicator that can keep on with the highest with the indicator and mix with it.

Right here’s the CSS:





  background-color: white; /* Be sure we’re working with white to cover indicator stops */
  top: 40px;
  high: 0px;

/* Every cease will shift one-third the width of the indicator container to cowl the entire thing when the final part is reached. */
.passageStops:nth-child(6) margin-left: 66.6%;

/* Extra styling, blah blah. */

The symptoms (.passageStops) are black. However the overlay mix mode makes them seem white when it blends with the white background underneath it. Since there are three sections, every indicator is of one-third width.

The symptoms have place: sticky; with a high distance worth. This implies the indications will stick as soon as they attain the calculated place from the highest of the display screen. When that occurs, the black indicators that appeared white mix with the violet indicator container, which makes them look like a darkish violet, representing the brand new scroll place on the web page.

The reverse can also be true. When an indicator loses its sticky place, it can transfer from the violet background of the indicator bar to the white background of the web page, hiding it as soon as once more… prefer it was by no means there!

Right here’s the demo once more:

CodePen Embed Fallback

That’s it. You may maybe additional experiment with this by having a non-white background with one other mix mode, or a gradient for the indicator bar or stops.

Leave a Reply