Fixed Header Table 3

by taylorpalmer

HTML

<body>
  <div id="wrap">
    <table>
      <thead id="fixed-header">
        <tr>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
          <th>Test</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="fixed-col">Test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test<span style="position: relative">Relative</span></td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td class="fixed-col">Test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td class="fixed-col">Test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td class="fixed-col">Test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
  ...

CSS

th {
  height: 100px;
  background: #999;
  color: white;
  position: relative;
  z-index: 10;
}

td {
  background-color: white;
  min-width: 100px;
  height: 100px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.fixed-col {
  z-index: 5;
}

body,
html {
  margin: 0;
}

thead {
  position: relative;
  z-index: 6;
}

JavaScript

var allTh = document.querySelectorAll("th");
var leftCells = document.querySelectorAll(".fixed-col");
var latestKnownScrollX = 0;
var latestKnownScrollY = 0;
var ticking = false;


var onScroll = function() {
  latestKnownScrollX = document.body.scrollLeft;
  latestKnownScrollY = document.body.scrollTop;
  requestTick();
}

function requestTick() {
  if (!ticking) {
    requestAnimationFrame(update);
  }
  ticking = true;
}

var immediate = true;

var update = function() {
  console.log('scrolling');
  ticking = false;
  var currentScrollY = latestKnownScrollY;
  var currentScrollX = latestKnownScrollX;

  var translateHead = (currentScrollY) + "px";

  for (var i = 0; i < allTh.length; i++) {
    allTh[i].style.top = translateHead;
  }

  var translateCell = currentScrollX + "px";

  for (var i = 0; i < leftCells.length; i++) {
    leftCells[i].style.left = translateCell;
  }

};

window.addEventListener("scroll", onScroll);