Question

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

 -----------------
|         |       |
|         |       |
| div A   | div B |
|         |       |
|         |       |
|         |       |
 -----------------

向下滚动

 -----------------
| div A   |       |
|         |       |
|         | div B |
|         |       |
|         |       |
|         |       |
 -----------------

我希望能够在Div B向下和向上滚动的同时保持Div A垂直固定。但当我向右和向左滚动时，我会用Div A和Div B来移动。

我注意到Twitter使用类似的东西。单击推文后，右侧显示推文详细信息的元素已经过修复。我不确定他们是怎么做的。看到第二张图片，当向下滚动时，右侧面板保持固定。

enter image description here

第二张图片：

enter image description here

Answer 1

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()
    });
});

查看live demo

您可能需要将document对象更改为您选择的其他对象或选择器。

Answer 2

很多人都想要这个，但遗憾的是纯CSS并没有提供一种方法来完成这个非常简单，非常有用的任务。我找到的唯一方法是给出div位置：fixed。但是，正如您所发现的，这会修复x轴和y轴上的div。

在我看来，这是CSS的一大失败。我们真的需要CSS位置：fixed-x和position：fixed-y。我发现这样做的唯一方法是在SetInterval（）超时（我使用.10秒）上输入一段JavaScript代码，重新定位需要更改的轴上的div。

在你的情况下（如果我正确地阅读了你的问题）你将在每个SetInterval（）勾选中更改顶部：DivB，将DivB向下移动到视口中想要的位置。容易做到而且有效，只是一种不必要的痛苦。

你可能会问，并且正确地说，为什么你（和我）在滚动事件触发时不能进行这种操作。答案是在某些版本的IE中，滚动事件不会触发。

如果你可以通过浏览器使这依赖于滚动事件，那将是一个巨大的进步。

HTH。

Answer 3

使用正确的标记和CSS可以轻松完成。您需要一个容器（div，section等）来包含您的两个内容区域。在下面的例子中，我利用JSFiddle呈现小提琴内容的方式，但该技术在JSFiddle之外是相同的。

Live example.

首先，我们需要标记：

<div id="container">
    <div id="divA">
        <p>This div will scroll.</p>
    </div>
    <div id="divB">
        <p>This div will not scroll.</p>
    </div>
</div>

接下来，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的位置模型设置为“绝对”和“固定”，这样它们将根据“容器”生成的框进行定位。这是解决问题的关键部分。

Answer 4

使用position:fixed作为样式，并为width设置固定的div。还会在像素中设置top和left或right。

我怎样才能有垂直固定的div元素？

4 个答案: