JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="wrapper">
<div id="header">HD1</div>
<div class="rowmain">
<div class="row"><h1>HD1</h1>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
</div>


<div class="row"><h1>HD2</h1>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
<p>fgsfsfsfsdfsdfsdf</p>
</div>


<div class="row"><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;}
#header {height:30px; background:#000; color:#fff; position:fixed;  width:200px;}
.rowmain {background:#ccc; padding-top:30px;}
h1 {background:red;}

JavaScript

var wrapper = document.getElementById("wrapper");
var header = document.getElementById("header");

var rows = document.getElementsByClassName("row");

function isElementInViewport (el) 
{
    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

function onScroll()
{
	var length = rows.length;
  
  if(!length)
  {
  	return;
  }
  
  for(var i = 0; i < length; i++)
  {
  	var row = rows[i];
  
		if(isElementInViewport(row))
    {
    	header.innerHTML = row.childNodes[0].innerHTML;
      return;
    }
  }
  
  wrapper.innerHTML = "well, shit, none in viewport";
}

wrapper.addEventListener("scroll", onScroll, false)