JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="wrapper">
  <div id="content">
    <div id="header">
      test header
    </div>
  </div>
</div>
</body>

CSS

* {
  margin: 0;
  padding: 0;
}
body {
  font: 12px/18px Arial, sans-serif;
  width: 100%;
}

#wrapper {
  height: 400px;
  overflow: auto;
  border: 1px solid #c0c0c0;
  width: 600px;
  position: relative;
  margin: 30px auto;
}
#content {
  height: 3000px;
}

#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: #7b9ce6;
  color: #fff;
  text-align: center;
  line-height: 30px;
}

JavaScript

document.getElementById('wrapper').addEventListener('scroll', windowScrollEvent);

  function windowScrollEvent() {
    var temp = document.getElementById('wrapper').scrollTop;
    document.getElementById('header').style.top = temp + 'px';
  }