JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div id="bumisan_goles"><span></span></div>

CSS

body{padding:0px;margin:0px;background:#000;min-height:500px;}
#bumisan_goles {
    position: fixed;
    background: #f7f1f1;
    top: 0px;
    color: #fdfdfd;
    width: 100%;
    font-family: sans-serif;
    padding: 18px 0px;
}
div#bumisan_goles span {
    width: 0%;
    background: #215ead;
    position: absolute;
    padding: 0px 0px;
    top: 0px;
    left: 0px;
    font-size: 17px;
}
div#bumisan_goles span:after {
    color: #fbf1f1;
    mix-blend-mode: difference;
    content: "ZORNET.RU";
    display: block;
    padding: 11px 7px;
    margin: 0px;
    width: 100px;
    font-family: sans-serif;
    font-size: 13px;
}

JavaScript

$(window).on('scroll',function() { 
sS = $(window).scrollTop(); 
fF = $(document).height()-$(window).height(); 
dD=sS/fF*100; 
Scroll=Math.round(dD); 
$('div#bumisan_goles span').css({width: ''+Scroll+'%'});
});