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

Question

I'm trying to keep a header on top of the page using JavaScript. position: fixed cannot be used because the header needs to be scrolling horizontally. Keeping it on top is easy but making it smooth is problematic. For some users it's smooth in Chrome but it's laggy on Safari for everyone.

Here is an example: http://jsbin.com/bufejapuza/edit?html,css,js,output

How do I keep the header fixed on top so that it won't be janky while scrolling.

Edit: To get it lagging in Chrome, try toggling the HTML, CSS & JS tabs in JSBin.

Answer 1

Use position fixed and adjust X dynamically, not Y

• Change header position to fixed
• Adjust the x-pos by JavaScript
• No jank while scrolling vertically

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

I tested this in Firefox and Safari (both Mac) and it fixed the problem.

Modified JS Bin