javascript – 我怎样才能有垂直固定的div元素?

前端之家收集整理的这篇文章主要介绍了javascript – 我怎样才能有垂直固定的div元素?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我想有垂直但不是水平固定的div元素.目前,我每次使用滚动时都使用jQuery更新位置顶部,但我不希望它看到移动.我希望它能在没有移动的情况下得到修复.有没有办法做到这一点?

 -----------------
|         |       |
|         |       |
| 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(太棒了!)

物业位置:固定;不能仅影响一个轴上的定位属性.这意味着,您无法向左或向右滚动,就像您想要的那样.

我强烈建议你应该避免超过屏幕宽度,使用元素宽度的百分比.你也可以坚持你的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()
    });
});

看看live demo

您可能需要将文档对象更改为您选择的另一个对象或选择器.

猜你在找的CSS相关文章