Centering a fixed element, but scroll it horizontally

Question

Having some issues getting this to work. PLEEEEEEASE help.

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

Add a couple more “E”s to your “please”. Then we’ll help. — Paul D. Waite, Mar 09 '11 at 18:50
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 · answered Mar 09 '11 at 18:53

4

Ah, interesting question. 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.

answered Mar 09 '11 at 18:53

Paul D. Waite

93,468
54
192
264

@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 May 23 '17 at 11:55

3

You can't have position:fixed on an overflow srolling 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 May 23 '17 at 11:55

Community

1
1

answered Mar 09 '11 at 19:37

Hussein

41,814
25
111
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

score 0 · Answer 3 · answered May 28 '12 at 13:47

0

Simple: http://jsbin.com/awaqug/edit#javascript,html,live

Edited a little bit by me, to make it easier to implement as you wish. The jquery code is not mine... Huh. This helped me, in no time...

answered May 28 '12 at 13:47

Vanea Alexander Bell

11

I also found this as a useful example to apply to my case. – kode Jan 30 '15 at 14:10

Centering a fixed element, but scroll it horizontally

3 Answers3

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

Linked