JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="info-box">
  <div class="doc"> Page Height: <span></span> px</div>
  <div class="vh">Viewport Height: <span></span> px</div>
  <div class="scrolled"> You scrolled: <span></span> px</div>
</div>

CSS

body {height: 8000px}

.info-box {position: fixed;top:0;}

JavaScript

jQuery(document).ready(function($) {

var pH = $('body').height(),
		wH = $(window).height();


$('.info-box .doc span').text(pH);
$('.info-box .vh span').text(wH);

  $(window).on('scroll', function() {
    var s = $(window).scrollTop();
    
    var sP = Math.floor((s / pH) * 100);
    
    
    $('.info-box .scrolled span').text(s + "px, " + sP + "%");
  });
})