页面滚动上的粘滞表标题

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位置为null或负数时切换thead css位置，然后：

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

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