How to Create a Scroll Progress Bar in JavaScript Between Specific Elements

effective way to do that is by adding visual indicators like a scroll progress bar. This guide will show you how to create a scroll progress bar using JavaScript, but with a twist it will only start and end between specific elements on your page. This can be particularly useful for long articles or pages where you want to highlight the user's progress through a particular section.

What is a Scroll Progress Bar?

A scroll progress bar is a visual indicator that shows the user's progress as they scroll through a webpage. It's usually displayed as a bar that fills up as the user scrolls down the page.

Why Use a Scroll Progress Bar?

A scroll progress bar provides users with a visual representation of their progress on the page.

Improves user experience by providing a sense of progress
Encourages users to scroll further down the page
Can be used to highlight important content or calls-to-action

Step-by-Step Guide

Here is a basic example of how to create a scroll progress bar using HTML, CSS, and JavaScript:

Step 1: Adding the HTML

First, you will need an HTML structure. We will use a div element that will serve as the progress bar.

HTML

<div id="scroll-progress-bar" aria-label="Page scroll progress"></div>

<div style="height: 2000px;">
    <!-- Your content goes here. Make sure the content is tall enough to allow scrolling. -->
    <p>Scroll down to see the progress bar in action.</p>
</div>

Step 2: Styling with CSS

Next, we will style the progress bar using CSS. The progress bar will be positioned at the top of the page and will expand horizontally as you scroll.

CSS

div#scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 5px;
    background-color: #006cfa;
    z-index: 500;
}

Step 3: Adding JavaScript

Finally, add the JavaScript that will update the progress bar width as you scroll down the page. Include the following JavaScript in your script file or Insert the end of your HTML file before closing </body> tag.

JavaScript

document.addEventListener("DOMContentLoaded", () => {
    const progressBar = document.getElementById("scroll-progress-bar");
    const totalHeight = document.documentElement.scrollHeight - window.innerHeight;

    // Function to update the progress bar
    const updateProgressBar = () => {
        const scrollPosition = window.scrollY;
        const scrollPercentage = (scrollPosition / totalHeight) * 100;
        progressBar.style.width = `${scrollPercentage}%`;
    };

    // Initial call to set progress bar on page load
    updateProgressBar();

    // Add scroll event listener with passive option
    window.addEventListener("scroll", updateProgressBar, { passive: true });
});

Live preview and edit code your self

Try it Yourself

Customization Options

Change the color and size of the progress bar
Add animations or transitions
Use different shapes or icons

Scroll Progress Bar Between The Specified Start And End Elements

This code will make the progress bar fill up as you scroll between the specified start and end elements, giving you more control over when the progress bar begins and ends.

Example Implementation

You want the progress bar to start when #startElement is at the top of the viewport.
The progress bar should finish when #endElement is at the top of the viewport.

You will define #startElement and #endElement in your HTML where the progress bar should begin and end.

HTML

<div id="scroll-progress-bar" aria-label="Page scroll progress"></div>

<!-- Content before start element -->
<div style="height: 800px; background: #eee;">Content Before</div>

<!-- Start element -->
<div id="startElement" style="height: 500px; background: #ccc;">
    Start Scrolling Progress Here
</div>

<!-- Some content in between -->
<div style="height: 1000px; background: #aaa;">
    Some Content
</div>

<!-- End element -->
<div id="endElement" style="height: 500px; background: #bbb;">
    End Scrolling Progress Here
</div>

CSS

#scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 5px;
    background-color: #ff0000;
    z-index: 600;
}

JavaScript

document.addEventListener("DOMContentLoaded", () => {
    // Cache DOM elements to avoid querying the DOM multiple times
    const startElement = document.getElementById("startElement");
    const endElement = document.getElementById("endElement");
    const progressBar = document.getElementById("scroll-progress-bar");

    // Variables to store calculated positions
    let startElementPosition, endElementPosition, totalScrollableDistance;

    // Function to update the width of the progress bar based on scroll position
    const updateProgressBar = () => {
        // Calculate the vertical position of start and end elements relative to the document
        startElementPosition = startElement.getBoundingClientRect().top + window.scrollY;
        endElementPosition = endElement.getBoundingClientRect().top + window.scrollY;

        // Determine the total scrollable distance between the start and end elements
        totalScrollableDistance = endElementPosition - startElementPosition;

        // Return early if the total scrollable distance is zero or negative
        if (totalScrollableDistance <= 0) return;

        let progress;

        // Calculate progress based on current scroll position
        if (window.scrollY >= startElementPosition && window.scrollY <= endElementPosition) {
            progress = ((window.scrollY - startElementPosition) / totalScrollableDistance) * 100;
        } else if (window.scrollY < startElementPosition) {
            progress = 0; // Before the start element
        } else {
            progress = 100; // After the end element
        }

        // Update the progress bar width
        progressBar.style.width = `${progress}%`;
    };

    // Set the initial state of the progress bar on page load
    updateProgressBar();

    // Attach the scroll event listener with the passive option for better performance
    window.addEventListener("scroll", updateProgressBar, { passive: true });
});

Click the button below and Live preview and edit code your self

Try it Yourself

Report Problem