Hello Howdy,

Do you know with the help of CSS and js, we can add a sticky progress navbar while scrolling on the website? In this article, we will learn how to create a sticky progress navbar on scrolling with the help of CSS and Javascript.

Step 1: Create an empty element

Create an empty element where you want to apply sticky progress. I have considered to apply it for the navbar.

Here is an empty element example.

    <div class="progress-container">
      <div class="progress-bar" id="progress_bar"></div>
    </div>

 

We have to place it in the header element as we want a sticky navbar. So place above code in the header element.

  <div class="header">
    <h2>Progress Scroll Nav Bar</h2>
    <div class="progress-container">
      <div class="progress-bar" id="progress_bar"></div>
    </div>  
  </div>

The div which has progress-container class is the main div of progress bar which will be stick and full width.

The div which has progress_bar id will the progress bar.

Step 2: Add Javascript Code

Below is the javascript code. please copy and paste it into your file.

<script>
window.onscroll = function() {
  progressScrollFunction();
};
function progressScrollFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("progress_bar").style.width = scrolled + "%";
}
</script>

 

In the above Javascript code progressScrollFunction is a function that will call when we scroll the window.

In that function, We are calculating the current scroll position in pixel and storing in winScroll variable.

We are calculating the total number of our page height and storing in height variable.

After calculating the total height, we calculate the height percentage and store in scrolled variable.

When we scroll the page, that actual percentage we have to apply for our progress bar.  With the help of this function document.getElementById(“progress_bar”).style.width = scrolled + “%”; we have applied total percentage height to div which has progress_bar id.

 

Step 3: Apply CSS

After showing the percentage to the Progress bar, We need to apply the CSS to visible the current percentage in color.

Use below CSS and place it in your CSS file.

<style>
    .header {
      position: fixed;
      top: 0;
      left: 0
      z-index: 9;
      width: 100%;
      background-color: #fff;
      text-align: center;
    }

    .progress-container {
      width: 100%;
      height: 1px;
      background: #ccc;
    }

    .progress-bar {
      height: 5px;
      background: #000;
      width: 0%;
    }

</style>

In this example, we have added black color to the scroll navbar and you can change it from the .progress-bar class property.

Our header position is sticky so we have applied position: fixed;  property to the header class.

So here is the final code to create a sticky progress navbar on the scroll.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">  
  <style>
    body {
      margin: 0;
      font-size: 16px;
      font-family: Poppins;
    }

    .header {
      position: fixed;
      top: 0;
      left: 0
      z-index: 9;
      width: 100%;
      background-color: #fff;
      text-align: center;
    }

    .progress-container {
      width: 100%;
      height: 1px;
      background: #ccc;
    }

    .progress-bar {
      height: 5px;
      background: #000;
      width: 0%;
    }

    .content {
      padding: 100px 0;
      margin: 50px auto 0 auto;
      width: 75%;
    }
  </style>
</head>
<body>

  <div class="header">
    <h2>Progress Scroll Nav Bar</h2>
    <div class="progress-container">
      <div class="progress-bar" id="progress_bar"></div>
    </div>  
  </div>

  <div class="content">
   
   <p>

    What is Lorem Ipsum?
  </p>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Why do we use it?
  </p>
  <p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

  </p><p>
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

  </p><p>
   
   It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

 </p><p>
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

</p>
</div>

<script>

  window.onscroll = function() {
    progressScrollFunction();
  };

  function progressScrollFunction() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.getElementById("progress_bar").style.width = scrolled + "%";
  }
</script>

</body>
</html> 

Please download the source code and view the demo from the below links.

Download   Demo