<div id=”scroll-indicator”>(SCROLL 0%)</div>
<style>
#scroll-indicator {
position: fixed;
font-size: 1rem;
top: 16px;
right: 16px;
font-family: Azeret Mono, Mono;
font-weight: 300;
color: white;
background: transparant;
z-index: 9999;
margin-top: 20px;
mix-blend-mode: difference;
}
</style>
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
window.addEventListener(‘scroll’, function() {
const scrollIndicator = document.getElementById(‘scroll-indicator’);
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight – window.innerHeight;
const scrollPercent = Math.round((scrollTop / docHeight) * 100);
scrollIndicator.textContent = `(SCROLL ${scrollPercent}%)`;
});
});
</script>