Centering a fixed element, but scroll it horizontally

房东的猫 提交于 2019-11-28 08:10:10

问题


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


回答1:


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.




回答2:


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/




回答3:


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...



来源:https://stackoverflow.com/questions/5250573/centering-a-fixed-element-but-scroll-it-horizontally

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!