Javascript粘性表头-在Chrome中工作，而不是在Firefox中

我正在尝试实现经典的“固定表头”效果，其中html

的

部分保持固定在表容器的顶部

通过使用附加到

scroll

事件的侦听器，我已经获得了一个很好的结果，我希望通过使用

requestAnimationFrame

对事件进行正确的去抖动。当前情况如JSFIDLE所示

问题是，我的解决方案在当前版本的Chrome和Iridium上运行得很好，但在Android和Firefox的Chrome上却失败了：在最后两种浏览器上，表格标题被“正确”翻译，但在鼠标滚动和标题的实际动画之间存在延迟。我认为这个问题是由于，但我不知道如何验证这个想法。在about APZ上，建议的解决方案是使用新的css属性

position:sticky

，但这种方法在表中“按设计”不起作用，也就是说，规范没有定义它

我的问题是：如何以跨浏览器的方式使用最佳实践来达到预期效果？或者，至少在Chrome和Firefox上是这样

注:

• 我不想使用JQuery
• 我想到了一些解决办法，但我想要一个“优雅”的解决方案。解决方法的一个示例是在表格标题上设置

  position:absolute

  ，并手动设置表格列的大小。我更喜欢允许浏览器自动设置列宽的解决方案

---

根据@Nepho的要求，以下是代码：

HTML:

Javascript:

var table = document.getElementById("table-div");
var latestKnownScrollTop = 0;
var ticking = false;
function onTableScroll() {
  latestKnownScrollTop = table.scrollTop;
  requestTick();
}
function requestTick() {
  if (!ticking) {
    requestAnimationFrame(tableUpdate);
  }
  ticking = true;
}
function tableUpdate() {
  ticking = false;
  var currentScrollTop = latestKnownScrollTop;
  var translate = "translate(0," + currentScrollTop + "px)";
  table.querySelector("thead").style.transform = translate;
}
table.addEventListener("scroll", onTableScroll);

---

请把相关的代码放在问题中，在我看来，堆栈溢出的代码对于一个帖子来说是相当长的。JSFIDLE正是为满足这一需求而诞生的，为什么我的解决方案的链接还不够呢？因为当人们在10年后查询您的问题并到达此页面时，您的FIDLE可能已经过期，或者该网站不再提供服务。考虑到这个问题，我怀疑十年后人们仍然会有这个问题，但这只是SO的最佳实践。

body { background-color: white; }

#table-div {
  height: 200px;
  overflow-y: auto;
}

#table {
  width: 100%;
  border-spacing: 0;
}

td, th {
  border: 1px solid #333;
}

thead {
  background-color: #fff;
  will-change: transform;
}

var table = document.getElementById("table-div");
var latestKnownScrollTop = 0;
var ticking = false;
function onTableScroll() {
  latestKnownScrollTop = table.scrollTop;
  requestTick();
}
function requestTick() {
  if (!ticking) {
    requestAnimationFrame(tableUpdate);
  }
  ticking = true;
}
function tableUpdate() {
  ticking = false;
  var currentScrollTop = latestKnownScrollTop;
  var translate = "translate(0," + currentScrollTop + "px)";
  table.querySelector("thead").style.transform = translate;
}
table.addEventListener("scroll", onTableScroll);