How to get a vertical scrollbar at the top of the page

 

Javascript

const progressBarScroll = () => {
  const winScroll = document.body.scrollTop || document.documentElement.scrollTop,
    height = document.documentElement.scrollHeight - document.documentElement.clientHeight,
    scrolled = (winScroll / height) * 100;
  document.getElementById('progressBar').style.width = `${scrolled}%`;
};

document.addEventListener('scroll', progressBarScroll);

 

You will need a CSS class

CSS

.scroll-progress-bar {
  background-color: #2196f3;
  height: 4px;
  width: 0%;
}

 

The HTML mark up

HTML

<header class="header">
  <div class="progress-container">
    <div id="progressBar" class="scroll-progress-bar"></div>
  </div>
</header>