JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="result"></div>
<div id="myDiv"></div>

CSS

#myDiv {height:1000px;width:100%;margin:auto;background-color:pink;}

#result {position:fixed;}

JavaScript

var h = document.body.scrollHeight;
var t = (h/3);

window.onscroll = function () {
    if (window.scrollY > t) {
var sh = (scrollY - t);
var remain = ((t * 2) / 100);

var nw = 100 - (sh / remain);

document.getElementById('myDiv').style.width = nw + "%";
document.getElementById('result').innerHTML = nw;
    }



};