JSFiddle - React, Tailwind, and code Playground

by Anuraj MS

HTML

<progress id="progressbar" value="0" max="100"></progress>
<br />
<br />
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />
<div id="horizontal">test</div>

CSS

progress {
    position:fixed;
    top:15px;
}

JavaScript

$(window).scroll(function () {
  var s = $(window).scrollTop(),
        d = $(document).height(),
        c = $(window).height();
        scrollPercent = (s / (d-c)) * 100;
        var position = scrollPercent;

   $("#progressbar").attr('value', position);

});