页面滚动上的粘性表格标题

Question

我这里有一支代码笔 - https://codepen.io/mt-ttmt/pen/EEBPKo

表格标题在滚动时是粘滞的，它不是完美的，而是一个起点。

我需要这个在表格上方有内容的页面中工作。

我这里有另一个代码笔 - https://codepen.io/mt-ttmt/pen/jzjbpO

是否可以调整此 javascript，以便表格标题在到达页面顶部并且表格内容滚动时具有粘性

window.addEventListener("scroll", function () {
  var translate = "translate(0," + this.scrollTop + "px)";
  var thead = this.querySelectorAll("thead");
  for (var i = 0; i < thead.length; i++) {
    thead[i].style.transform=translate;
  }
});

Answer 1

当您的表格 scrollTop 位置为空或负时，您可以切换 css 位置：

thead.sticky{ position: fixed; top: 0; }

然后你必须调整thead.left的位置，以及每个thead ths的宽度，使其与每个tbody tds相对应。