JSFiddle - React, Tailwind, and code Playground

by olegcvetkov76

HTML

<div class="scroll_progress">
  <span class="scroll_progress__text">0%</span>
</div>
  
<div class="container">
  <div class="some_content"></div>
  <div class="some_content"></div>
  <div class="some_content"></div>
  <div class="some_content"></div>
  <div class="some_content"></div>
</div>

CSS

.scroll_progress {
  position: fixed;
  top: 45%;
  right: 20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #4f5a6e;
  border: 2px solid #424b5f;
  width: 50px;
  height: 50px;
}

.scroll_progress__text {
  display: inline-block;
  text-align: center;
  font-size: 16px;
  color: #a7b3cb;
  width: 100%;
  line-height: 50px;
  font-weight: 300;
}

.some_content {
  border: 1px dashed #333;
  height: 400px;
}

JavaScript

var scrollProgress = document.querySelector('.scroll_progress__text');

window.onscroll = function() {
  var offset = window.pageYOffset || document.documentElement.scrollTop,
  		windowHeight = document.documentElement.scrollHeight-document.documentElement.clientHeight,
      progress = Math.floor(offset/windowHeight * 100);
  scrollProgress.innerHTML = progress + '%'
}