JSFiddle - React, Tailwind, and code Playground

by hakarune

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

$(document).ready(function () {
    $(window).scroll(function () {
        var s = $(this).scrollTop(),
            d = $(document).height(),

        scrollPercent = (s / d);

        var position = (scrollPercent);
        
        $("#progressbar").progressbar('value', position);
        });
    });
});