Geek Answers Handbook

Centering a fixed element, but scrolling horizontally

Having some problems for this to work. Help PLEEEEEEASE.

I would like the element to be attached to the top of the viewport when the user scrolls the page while staying at the top of the viewport ... easily. If the window is narrower then 960px horizontal scrollbars appear. If the window scrolls horizontally, I would like the contents inside this fixed element to scroll along with it.

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

Is this possible without JavaScript? It should work in IE7 + and not completely break in IE6.

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

+5
source share
3 answers

Ah, an interesting question. I do not think you can achieve this without JavaScript.

position: fixedmeans that the item is relative to the viewport. You want it to be upright, but you don't want it horizontally. I don’t think any way to achieve this in CSS.

+4
source

You may not have position:fixedoverflow scroll content. For this you need to use JavaScript. I answered a similar question using jQuery in the Fixed title inside the scroll block , where the div is fixed, even if the content scrolls by overflow.

http://jsfiddle.net/VswxL/3/

+3

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

Edited a little by me to make it easier to implement as you wish. The jquery code is not mine ... Yes. It helped me, instantly ...

0
source

More articles:


All Articles