Centering a fixed element, but scroll it horizontally

Question

I would like an element fixed to the top of the viewport, when the user scrolls down the page it remains at the top of the viewport... easy. If the window is narrower then 960px the horizontal scrollbars appear. If the window is scrolled horizontally I would like the content inside this fixed element to scroll with it.

Please check out the demo, the two green boxes should always line up. Make your window narrow and scroll horiz, notice how they no longer line up.

Is this possible without JavaScript? Should work in IE7+ and not totally break in IE6.

http://www.louiswalch.com/beta/t/_scrolltest4.html

So you always want the green boxes to be vertically in line with each other? — Emmanuel, Mar 09 '11 at 18:50
Correct, they should always vert align. Top one would be fixed, and the bottom green box would scroll with page content. — Louis W, Mar 09 '11 at 18:54
According to [Google Browser Size](http://browsersize.googlelabs.com/), **90%** of people have at least `960px` viewport width. Just thought I'd point that out. — thirtydot, Mar 09 '11 at 18:56
Final result http://www.louiswalch.com/beta/t/_scrolltest5.html — Louis W, Mar 11 '11 at 04:16

score 4 · Accepted Answer · edited Dec 30 '22 at 20:58

4

I don’t think you can achieve that without JavaScript.

position: fixed means that the element is positioned relative to the viewport. You want that vertically, but you don’t want it horizontally. I don’t think there’s any way to achieve that in CSS.

edited Dec 30 '22 at 20:58

TylerH

20,799
66
75
101

answered Mar 09 '11 at 18:53

Paul D. Waite

96,640
56
199
270

@Alex: yeah — I’m not sure if I’m missing something, but I can’t think of how you’d work around this? – Paul D. Waite Mar 09 '11 at 18:57
Had a feeling this was the case, but thought I would ask anyway. – Louis W Mar 09 '11 at 22:07
@Louis: definitely worth asking, if only to clarify what you’re trying to do. Best of luck finding a solution — JavaScript would be the way to go I guess. – Paul D. Waite Mar 09 '11 at 22:44

score 3 · Answer 2 · edited Dec 30 '22 at 20:58

3

You can't have position:fixed on an overflow scrolling content. You need to use JavaScript for this. i answered a similar question using jQuery at Fixed header inside scrolling block where a div is fixed even if content is scrolling by overflow.

Check working example at http://jsfiddle.net/VswxL/3/

edited Dec 30 '22 at 20:58

TylerH

20,799
66
75
101

answered Mar 09 '11 at 19:37

Hussein

42,480
25
113
143

Is that example working? I think the OP wants the header to stay in place when scrolled vertically, but move with the rest of the page when scrolled horizontally. Yours seems to stay in place in both cases. (I’m on Chrome 9.) – Paul D. Waite Mar 09 '11 at 22:43
Yes it works in all browsers. Header will remain fixed even if content scrolls vertically or horizontally. Assuming that's what OP wants. – Hussein Mar 09 '11 at 22:47
That’s not what the OP wants though. He wants it fixed during vertical scrolling, but moving during horizontal scrolling. – Paul D. Waite Mar 09 '11 at 22:52
1

I got you. It's an easy fix. http://jsfiddle.net/VswxL/4/. I misunderstood the question – Hussein Mar 09 '11 at 22:58
@Hussein: easily done, it’s really difficult to describe visual effects like these in words. That JS should be really helpful though. – Paul D. Waite Mar 09 '11 at 23:24
Yea perhaps OP didn't feel comfortable with the jQuery code. It's the only way to do it. – Hussein Mar 09 '11 at 23:25

Centering a fixed element, but scroll it horizontally

2 Answers2

Linked