使用JavaScript将水平滚动标题固定在顶部

Question

我正在尝试使用JavaScript在页面顶部保留标题。无法使用position: fixed，因为标头需要水平滚动。保持在顶部很容易，但使其平滑是有问题的。对于一些用户来说，它在Chrome中很流畅，但对于每个人而言，它在Safari上都很滞后。

以下是一个示例：http://jsbin.com/bufejapuza/edit?html,css,js,output

如何将标题固定在顶部，以便在滚动时不会显得粗糙。

编辑：为了让它在Chrome中落后，请尝试切换HTML，CSS＆amp; JSBin中的JS选项卡。

Answer 1

使用固定位置并动态调整X，而不是Y

• 将标题position更改为fixed
• 通过JavaScript调整x-pos
• 垂直滚动时没有jank

function setLocation() {
  var left = -window.scrollX;  
  header.style.transform = "translateX(" + left + "px)";
}

我在Firefox和Safari（都是Mac）中对此进行了测试，并修复了问题。

Modified JS Bin