JSFiddle - React, Tailwind, and code Playground

HTML

<span id="count">0</span>
<div id="diva"></div>
<div id="divb"></div>
<div id="divc"></div>

CSS

#diva {
  height: 1000px;
  width: 100%
}
#divb {
  height: 1296000px;
  width: 100%
}
#divc {
  height: 1000px;
  width: 100%
}

#count {
  position: fixed;
}

JavaScript

var counter = document.getElementById('count');

function updateCounter() {
  'use strict';
  var clientHeight = document.getElementById('divb').clientHeight - window.innerHeight;
  counter.textContent =  Math.round(document.documentElement.scrollTop * 3.4735);
}
//multiplied by 3.4735 for the km scale

document.addEventListener('scroll', updateCounter);
window.addEventListener('resize', updateCounter);