Tiny ScrollSpy & Scroll Progress Indicator In JavaScript – Scroll Progress

Category: Javascript | November 16, 2020
Views Total:1,303 views
Official Page:Go to website
Last Update:November 16, 2020


Tiny ScrollSpy & Scroll Progress Indicator In JavaScript – Scroll Progress


Scroll Progress is a tiny and feature-rich scrollspy library that updates nav items to indicate on which content you’re viewing and displays how much content has been read (as a percentage) in this content section.

How to use it:

1. Create nav links pointing to the sections.

<nav id="home">
  <div id="cursor"></div>
    <a href="#link1">Paragraph A</a>
    <a href="#link2">Paragraph B</a>
    <a href="#link3">Paragraph C</a>
<h1 id="link1">Paragraph A</h1>
<h1 id="link2">Paragraph B</h1>
<h1 id="link3">Paragraph C</h1>

2. Create a container to hold scroll position information.

  <span id="current-paragraph-name"></span>
  <span id="current-paragraph-percent"></span>

3. Load the Scroll Progress library on the page.

<script src="scroll-progress.min.js"></script>

4. Enable the scrollspy functionality and scroll progress indicator.

document.addEventListener("DOMContentLoaded", function (event) {
  let currentParagraphName = document.getElementById('current-paragraph-name');
  let currentParagraphPercent = document.getElementById('current-paragraph-percent');
  new ScrollProgress.Init(
      progress => {
          currentParagraphName.innerText = document.getElementById(progress.id).innerText;
          currentParagraphPercent.innerText = progress.percent + '%';
      id => {
          document.querySelectorAll('a[href*="link"]').forEach(element => element.classList.remove('active-meny-item'));


v1.2.1 (11/16/2020)

  • Fixed Children element not worked

v1.2.0 (10/25/2020)

  • bug fixed and optimize.

You Might Be Interested In:

Leave a Reply