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

Question

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

这是一个例子:http://jsbin.com/bufejapuza/edit?html,css,js,output

如何将页眉固定在顶部，以便在滚动时不会卡顿。

编辑:要使其在 Chrome 中滞后，请尝试在 JSBin 中切换 HTML、CSS 和 JS 选项卡。

Answer 1

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

• 将 header position 更改为 fixed
• 通过 JavaScript 调整 x-pos
• 垂直滚动时没有卡顿

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

我在 Firefox 和 Safari(均为 Mac)中对此进行了测试，它解决了问题。

Modified JS Bin