我在一个页面上有多个表格，我希望它们的页眉是粘性的

.table-header {
  position: sticky;
  top: 0;
  background-color: #f5f5f5;
}

<table>
  <thead class="table-header">
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格内容 -->
  </tbody>
</table>

window.addEventListener('scroll', function() {
  var tableHeaders = document.querySelectorAll('.table-header');
  tableHeaders.forEach(function(header) {
    var tableRect = header.parentNode.getBoundingClientRect();
    var headerRect = header.getBoundingClientRect();
    if (tableRect.top > 0 && tableRect.bottom < window.innerHeight) {
      header.style.top = '0';
      header.style.width = tableRect.width + 'px';
    } else {
      header.style.top = '';
      header.style.width = '';
    }
  });
});