固定固定元素,但水平滚动

时间:2011-03-09 18:41:42

标签: html css fixed

有一些问题让这个工作。 PLEEEEEEASE帮助。

我想要一个固定在视口顶部的元素,当用户向下滚动页面时,它仍保留在视口的顶部...很容易。如果窗口较窄,则会出现960px的水平滚动条。如果窗口水平滚动,我希望这个固定元素内的内容与它一起滚动。

请查看演示,两个绿色框应始终排成一行。让你的窗户缩小并滚动水平,注意它们不再排列。

没有JavaScript,这可能吗?应该在IE7 +中工作,而不是完全打破IE6。

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

3 个答案:

答案 0 :(得分:4)

啊,有趣的问题。如果没有JavaScript,我认为你无法做到这一点。

position: fixed表示元素相对于视口定位。你想要垂直,但你不想横向。我认为没有办法在CSS中实现这一点。

答案 1 :(得分:3)

您不能在溢出滚动内容上position:fixed。你需要使用JavaScript。我在Fixed header inside scrolling block使用jQuery回答了类似的问题,即使内容按溢出滚动,div也会被修复。

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

处的工作示例

答案 2 :(得分:0)

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

我编辑了一下,让你更容易实现。 jquery代码不是我的...嗯。这对我很有帮助......