JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <table>
        <thead>
            <tr class="header">
                <th>Foo</th>
                <th>Bar</th>
            </tr>
        </thead>
        <tbody>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
        </tbody>
    </table>
</div>

CSS

/* your existing container */
#wrap {
    overflow: auto;
    height: 400px;
    background-color: white;
}

th {
  background-color: red;
}

/* css for demo */
td {
    background-color: green;
    width: 200px;
    height: 100px;
}

JavaScript

document.getElementById("wrap").addEventListener("scroll",function(){
   var translate = "translate(0,"+this.scrollTop+"px)";
   
   const allTh = this.querySelectorAll("th");
   for( let i=0; i < allTh.length; i++ ) {
     allTh[i].style.transform = translate;
   }
});