Keep horizontally scrolling header fixed on top using 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.

I see the top bar is static not Junky while scrolling!

Smit
– Smit

2016-08-19 08:31:45 +00:00
Commented Aug 19, 2016 at 8:31 — Smit
– Smit, Commented Aug 19, 2016 at 8:31
@Smit which browser and OS?

Serge
– Serge

2016-08-19 08:35:58 +00:00
Commented Aug 19, 2016 at 8:35 — Serge
– Serge, Commented Aug 19, 2016 at 8:35
@Smit please try it on Safari

Serge
– Serge

2016-08-19 08:36:35 +00:00
Commented Aug 19, 2016 at 8:36 — Serge
– Serge, Commented Aug 19, 2016 at 8:36

Mario · Accepted Answer · 2016-08-21 09:28:50Z

4

+50

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

edited Aug 21, 2016 at 9:28

answered Aug 21, 2016 at 8:48

Mario

8,3002 gold badges17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mario Over a year ago

Because it uses position fixed.

Serge Over a year ago

But the other way uses position absolute which makes horizontal scrolling smooth. Why does it not lag horizontally when that doesn't use fixed positioning?

Mario Over a year ago

Your code does not change anything while scrolling horizontally, therefore we don't see any jank. ;-)

Serge Over a year ago

That doesn't explain why switching on which axis we use CSS and JS changes the performance of scrolling.

Mario Over a year ago

You are right. What solves the jank problem is the use of position fixed. As fixed takes care of Y, we need to adjust X, only.

Collectives™ on Stack Overflow

Keep horizontally scrolling header fixed on top using JavaScript

1 Answer 1

Use position fixed and adjust X dynamically, not Y

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Use position fixed and adjust X dynamically, not Y

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related