JavaScript Progress Scroll Bar

HTML

    <div class="header-bar">

      <div class="progress-bar" id="myBar"></div>

    </div>

 

SCSS

body {

  height: 4000px;

}

.header-bar {

  position: fixed;

  top: 0;

  z-index: 1;

  width: 100%;

}

.progress-bar {

  height: 2px;

  background: black;

  width: 0%;

}

 

JavaScript

window.onscroll = function () {

  myFunction();

};

function myFunction() {

  let winScroll = document.body.scrollTop || document.documentElement.scrollTop;

  let height =

    document.documentElement.scrollHeight -

    document.documentElement.clientHeight;

  let scrolled = (winScroll / height) * 100;

  document.getElementById("myBar").style.width = scrolled + "%";

}