JSFiddle - React, Tailwind, and code Playground

by holden321

HTML

<div id="block">0</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac velit eu arcu eleifend dictum sed quis est. Praesent id vestibulum mi, eu malesuada massa. Nullam placerat ante vel massa pellentesque gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean quis scelerisque arcu. Praesent sollicitudin arcu eu lacus fermentum aliquam. Quisque blandit odio lacus, id sodales nunc bibendum eu. Vivamus ultrices quam urna, nec pretium nisi malesuada ut. Maecenas laoreet nulla id eros suscipit pharetra. Maecenas quis erat nec diam aliquet convallis. Integer gravida nisl vitae turpis feugiat, ut ultrices sem bibendum. In orci ligula, luctus pharetra elit a, placerat mollis odio. Praesent ac velit ut diam rhoncus sagittis eu sed est. Sed lacinia sagittis velit nec venenatis.

Suspendisse potenti. Vivamus laoreet sagittis massa in posuere. Cras lacinia nunc nec arcu euismod, pellentesque sagittis felis sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse platea dictumst. Pellentesque in risus a leo volutpat pellentesque id ac nisl. Maecenas eget fermentum ligula. Pellentesque ultricies porta cursus. Curabitur ultrices quam felis, eget convallis mi imperdiet in. Suspendisse venenatis tempus ipsum eget sodales. Donec nunc nisl, congue non tincidunt vitae, fringilla a velit. Cras dictum augue accumsan quam dignissim laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ut elit elit. Praesent condimentum mauris eu nisi pulvinar, sed tempus dolor tempor. Phasellus vitae condimentum augue.

Nunc faucibus aliquam urna, at fringilla nisi interdum vel. Vivamus a sollicitudin neque, ut pellentesque nulla. In aliquam enim ut lorem vehicula, sed viverra ante tempus. Ut et arcu eget nisl pretium lobortis. Nunc in neque nec urna vulputate tincidunt. Integer at lorem fringilla, porta felis eget, ultricies magna. Mauris...

CSS

#block {
    position:fixed;
    left:10px;
    top:10px;
    background:white;
    font-size:24px;
    border:1px solid black;
    padding:0 10px;
}

JavaScript

window.onscroll=function(){
    var perc=Math.floor(100*pageYOffset/(document.body.clientHeight-innerHeight));
    window.block.style.display=perc<20?"block":"none";
    window.block.innerHTML=perc;
};