JSFiddle - React, Tailwind, and code Playground

by TinT

HTML

<div class="box">
  <div class="header">
    <table>
      <tr>
        <td class="superfixed">Header</td><td>Header</td><td>Header</td><td>Header</td><td>Header</td><td>Header</td><td>Header</td>
      </tr>
      <tr>
        <td class="superfixed">Header</td><td>Header</td><td>Header</td><td>Header</td><td>Header</td><td>Header</td><td>Header</td>
      </tr>
    </table>
  </div>
  <div class="leftCol">
    <table>
      <tr><td>col</td></tr>
      <tr><td>col</td></tr>
      <tr><td>col</td></tr>
      <tr><td>col</td></tr>
      <tr><td>col</td></tr>
      <tr><td>col</td></tr>
      <tr><td>col</td></tr>
      <tr><td>col</td></tr>
    </table>
  </div>
  
  <div class="data">
    <table>
      <tr><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td></tr>
      <tr><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td></tr>
      <tr><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td></tr>
      <tr><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td></tr>
      <tr><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td></tr>
      <tr><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td></tr>
      <tr><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td></tr>
      <tr><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td></tr>
    </table>
  </div>
</div>

CSS

table {
  border-collapse: collapse;
  table-layout: fixed;
}
table td {
  border: 1px solid black;
  width:50px;
}
.superfixed {
  background: white;
  position: fixed;
  left: 0px;
}
.header {
  background: red;
  position: fixed;
  margin-left: 50px;
  z-index: 3;
}
.data {
  background: white;
  margin-top: 40px;
  margin-left: 50px;
}
.leftCol {
  background: green;
  top: 40px;
  position: fixed;
}
.box {
  height: 2000px;
  width: 3000px;
  overflow: scroll;
}

JavaScript

var prevTop = 0;
var prevLeft = 0;

$(window).scroll(function(event){
	var currentTop = $(this).scrollTop();
  var currentLeft = $(this).scrollLeft();
  
  if(prevLeft !== currentLeft) {
  	prevLeft = currentLeft;
    $('.header').css({'left': -$(this).scrollLeft()})
  }
  if(prevTop !== currentTop) {
  	prevTop = currentTop;
    $('.leftCol').css({'top': -$(this).scrollTop() + 40})
  }
});