页面滚动上的粘表标题

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位置为空或负数时，您可以切换thead css位置：

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

然后您必须调整thead.left位置和每个thead ths宽度，使其对应于每个tbody tds。