使用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

• 将标题position更改为fixed
• 通过JavaScript调整x-pos
• 垂直滚动时无杂音

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

我在Firefox和Safari（均为Mac）中进行了测试，并解决了该问题。

修改后的JS Bin