我怎样才能有垂直固定的div元素?
我想有垂直但不是水平固定的div元素。 目前,我每次使用滚动时都使用jQuery更新位置top
,但我不希望它看到移动。 我希望它能在没有移动的情况下得到修复。 有没有办法做到这一点?
----------------- | | | | | | | div A | div B | | | | | | | | | | -----------------
向下滚动
----------------- | div A | | | | | | | div B | | | | | | | | | | -----------------
我想能够保持Div B
垂直固定而Div A
向下和向上滚动。 但是当我向右和向左滚动时,我会将Div A
和Div B
移动。
我注意到Twitter使用类似的东西。 单击推文后,右侧显示推文详细信息的元素将被修复。 我不确定他们是怎么做的。 看到第二张图片,向下滚动右侧面板保持固定。
第二张图片:
Twitter使用css属性: position: fixed;
这肯定是最好的方式。
这正是它所说的,它确定了位置。 通过使用top
, right
, bottom
和left
属性,您可以设置div的确切位置。
编辑13-12-11 (太棒了!)
物业position: fixed;
不能仅影响一个轴上的定位属性。 这意味着,您无法向左或向右滚动,就像您想要的那样。
我强烈建议你应该避免超过屏幕宽度,使用元素宽度的百分比。 你也可以坚持你的JavaScript。
但是,您可以首先使用我建议的方法,但使用滚动事件侦听器更改left属性,以便在滚动时,左侧偏移量增加或减少。 因为jQuery的糟糕的跨浏览器支持我会选择jQuery。 我认为你可以对原型库做几乎一样的事情,但我不熟悉那个库。
jQuery(在谷歌浏览器中工作):
var offset = 400; // left offset of the fixed div (without scrolling) $(document).scroll(function(e) { // b is the fixed div $('.b').css({ 'left': offset - $(document).scrollLeft() }); });
看看现场演示
您可能需要将document
对象更改为您选择的另一个对象或选择器。
很多人都想要这个,但不幸的是纯CSS并没有提供一种方法来完成这个非常简单,非常有用的任务。 我找到的唯一方法是给出div位置:fixed。 但是,正如您所发现的,这会修复x和y轴上的div。
在我看来,这是CSS的一大失败。 我们真的需要CSS位置:fixed-x和position:fixed-y。 我发现这样做的唯一方法是在SetInterval()超时(我使用.10秒)上输入一段JavaScript代码,重新定位需要更改的轴上的div。
在你的情况下(如果我正确地读了你的问题),你将在每个SetInterval()勾选时更改顶部:DivB,将DivB向下移动到视口中想要的位置。 容易做,它的工作,只是一个不必要的痛苦。
您可能会问,并且正确地说,当滚动事件触发时,为什么您(和我)无法执行此操作。 答案是在某些版本的IE 中不会触发滚动事件。
如果你可以通过浏览器使这依赖于滚动事件,那将是一个巨大的进步。
HTH。
使用正确的标记和CSS可以轻松完成此操作。 您需要一个容器( div
, section
等)来包含您的两个内容区域。 在下面的例子中,我利用JSFiddle呈现小提琴内容的方式,但该技术在JSFiddle之外是相同的。
实例。
首先,我们需要标记:
This div will scroll.
This div will not scroll.
接下来,CSS:
#container { height: 100%; postition: relative; width: 100%; } #divA { background: #ccc; height: 300%; /* So we can see scrolling in action */ left: 0; position: absolute; top: 0; width: 25%; } #divB { background: #c55; height: 100%; position: fixed; right: 0; width: 75%; }
在这个例子中,我利用JSFiddle将创建一个有限大小的视图端口这一事实。 因此,我可以按百分比指定所有尺寸。
请注意,我将容器的位置设置为relative。 这样我可以将divA和divB的位置模型设置为“绝对”和“固定”,这样它们将根据“容器”生成的框进行定位。 这是解决问题的关键部分。
使用position:fixed
为样式并为div
设置固定width
。 也设置像素的top
和left
或right
。