JSFiddle - React, Tailwind, and code Playground

by Arthur Lutkevichus

HTML

<label><input type="checkbox" checked /><b>#container</b> transform style enabled</label>
<div id="overflow">
  <div id="container" class="transform">
    <div>
      This content has static position
    </div>
    <div id="fixed">
      Fixed|Fixed|Fixed|Fixed|Fixed
    </div>
    <div>
      This content has static position
    </div>
    <div>
      This content has static position
    </div>
    <div>
      This content has static position
    </div>
    <div>
      This content has static position
    </div>
  </div>
</div>

SCSS

#overflow {
  margin: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  height: 5rem;
  width: 8rem;
  background: lightgray;
}

#container {
  white-space: nowrap;
  
  &.transform {
     transform: translate(0, 1rem);
  }
}

#fixed {
  position: fixed;
  transform: translate(1rem, -.5rem);
  z-index: 99999;
  color: red;
  font-weight: bold;
  border: 1px solid red;
}

JavaScript

document.querySelector("input").addEventListener("change", e => {
	document.getElementById("container").classList[e.currentTarget.checked ? "add" : "remove"]("transform");
});