JSFiddle - React, Tailwind, and code Playground
HTML
<div class="top-element">
<h1>I am the top element</h1>
</div>
<div class="main">
<p class="body position">the body element's position is: (scroll to start)</p>
<p class="top position">the top element's position is: (scroll to start)</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis deleniti in labore nulla vel, consectetur mollitia veritatis facilis voluptas, recusandae minus ullam doloribus vero delectus ratione assumenda architecto expedita. Distinctio.</p>
<img src="http://lorempixel.com/400/400" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ullam facilis sunt, delectus nulla ab provident id unde perferendis tempora eos, iste culpa, officiis dolor maiores tempore. Illum omnis sunt assumenda soluta eius quos amet tenetur, vitae perferendis dolorum nemo odit enim itaque consequatur, eligendi! A laudantium quidem corporis natus iste dlaborum ullam odit itaque, quaerat qui in! Modi quos sequi molestias doloremque totam pariatur eos, reiciendis natus expedita cum sapiente, saepe veniam! Mollitia atque officia sunt dolore ut voluptates, harum, impedit esse, fugiat numquam doloribus! Rerum ipsam odio, quasi, commodi libero animi voluptatem tempore, iusto maxime nostrum culpa eum nemo fuga adipisci nihil mollitia eius aliquid necessitatibus facere cumque. Non ut, quos placeat, praesentium deleniti, autem ducimus, alias aspernatur eveniet explicabo saepe sed eaque! Deleniti fugit quia mollitia sit. Reprehenderit eaque aliquid culpa facilis placeat possimus eligendi sit eum, officiis voluptatum, necessitatibus. Mollitia incidunt blanditiis ut odit fugiat, nostrum vel omnis maiores, praesentium dolorem cumque iste sed laudantium, facere explicabo! Labore iure, et eveniet quibusdam nulla repellat explicabo libero animi suscipit, fuga culpa cupiditate quas? Ipsa debitis animi dolores beatae, nulla eos adipisci. Cupiditate, ea. Similique porro obcaecati alias atque, pariatur ipsam. Illum quaerat cum...
CSS
body, html {
height: 100%;
}
body{
background-color: #f9f9f9;
font-family: sans-serif;
}
.top-element{
text-align: center;
background-color: #666;
color: #fff;
height: 4em;
}
.center{
background-color: lightyellow;
}
.position{
font-size: 2em;
}
JavaScript
$(window).scroll(function(){
bodyPos= $('body').scrollTop();
topPos = $('.top').scrollTop();
$('.body').text('the body element\'s position is: '+bodyPos);
$('.top').text('the top element\'s position is: '+topPos);
})