<h1>Click one time the bottom key to get the value</h1>
<h2>Value: 0</h2>
body {
  height: 100vh;
  margin: 0;
  overflow: auto;
}
h1,h2 {
  position: sticky;
  top:0;
}
h2 {
  top: 2lh;
}
body:after {
  content:"";
  display: block;
  height: 150vh;
}

html {
  overflow: hidden;
}
const scroller = document.querySelector("body");

scroller.addEventListener("scroll", (event) => {
  scroller.querySelector('h2').textContent = `Value: ${scroller.scrollTop}`;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.