JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="wrapper">
<div id="lodHd"></div>
<div class="rowmain">
<div class="row1"><h1>HD1</h1>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
</div>
<div class="row2"><h1>HD2</h1>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
</div>
<div class="row3"><h1>HD3</h1>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
</div>
</div>
</div>
CSS
* {margin:0; padding:0;}
.wrapper { border:solid 1px red; width:200px; height:180px; overflow-x:hidden; overflow-y:scroll;}
#lodHd {height:30px; background:#000; color:#fff; position:fixed; width:200px;}
.rowmain {background:#ccc; padding-top:30px;}
h1 {background:red;}
JavaScript
$(document).ready(function(){
var x = $(".row1").offset();
var row1TopPos = x.top;
//alert(row1TopPos);
var y = $(".row2").offset();
var row2TopPos = y.top;
//alert(row2TopPos);
var z = $(".row3").offset();
var row3TopPos = z.top;
//alert(row3TopPos);
$(".wrapper").scroll(function(){
if ( row1TopPos < 35)
{
var hdtext = $(".row1 h1").text();
$("#lodHd").text(hdtext);
}
if (row2TopPos < 35)
{
var hdtext = $(".row2 h1").text();
$("#lodHd").text(hdtext);
}
if (row3TopPos < 35)
{
var hdtext = $(".row3 h1").text();
$("#lodHd").text(hdtext);
}
});
$("button").click(function(){
alert(row1TopPos);
});
});