JSFiddle - React, Tailwind, and code Playground

by floAtEbcont

HTML

<!DOCTYPE html>
<html>
    <body onload="onLoad()">
        <div class="wrapper">
          <div class="scroller" id="scroller" onscroll="onScroll()">
              <div class="sticky-header" id="stickyHeader">Sticky Header</div>
          </div>
        </div>
    </body>
</html>

CSS

html, body {
  height: 100%;
  max-height: 100%;
  padding: 0;
  margin: 0;
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.scroller {
  margin: 5px 10px;
  flex: 1;
  border: 1px solid black;
  overflow-y: auto;
}

.sticky-header {
  background-color: darkcyan;
  position: relative;
  z-index: 999;
  width: 100%;
}

JavaScript

let scroller;
let stickyHeader;

function onLoad() {
	scroller = document.getElementById('scroller');
  stickyHeader = document.getElementById('stickyHeader');
  
  for (const element of Object.keys(Array.from(Array(1000)))) {
    const elementNode = document.createElement('div');
    elementNode.append(element);
  	scroller.append(elementNode);
  }
}

function onScroll() {
  stickyHeader.style.transform = `translateY(${scroller.scrollTop}px)`;
}