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

I would like to have vertically but not horizontally fixed div element. Currently, I am using jQuery to update the position top every time scroll occurs, but I don't want it seeing moving. I would like it to be fixed without moving. Is there a way to do this?

我希望有垂直而不是水平固定的div元素。目前，我正在使用jQuery在每次滚动时更新位置顶部，但我不希望它看到移动。我希望它是固定不变的。有办法吗?

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

Scrolling down

向下滚动

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

I would like to be able keep Div B vertically fixed while Div A scrolls down and up. But when I scroll to the right and left, I wand Div A and Div B to move.

我希望能保持Div B的垂直固定，而Div A则向下滚动。但是当我向右和左滚动时，我需要Div A和Div B移动。

I noticed that Twitter uses something similar. Once you click on a tweet, the element on the right that display the tweet detail, is veridically fixed. I am not sure how they are doing it. See the second image, when scrolling down the right panel stays fixed.

我注意到Twitter使用了类似的东西。一旦你点击了一条tweet，右边显示tweet细节的元素就会被完全修复。我不知道他们是怎么做的。看到第二个图像时，向下滚动右边的面板保持不变。

Second image:

第二个图片:

4 个解决方案

#1

Twitter uses a css property: position: fixed; which sure is the best way to go.

Twitter使用css属性:position: fixed;这肯定是最好的办法。

This does exactly what it says it does, it fixes the position. By using the top, right, bottom and left properties you can set the exact position of your div.

这和它说的完全一样，它固定了位置。通过使用顶部、右侧、底部和左侧属性，您可以设置div的确切位置。

---

Edit 13-12-11 (awesome date!)

编辑13-12-11(可怕的日期)

The property position: fixed; can not influence a positioning property over one axis only. This means, that you can not scroll left or right, like you want to.

属性:固定;不能只影响一个轴的定位性能。这意味着你不能像你想的那样向左或向右滚动。

I highly suggest you should either avoid surpassing the screen width, using percentages for your element's width. You can also just stick to your javascript.

我强烈建议您避免超过屏幕宽度，使用元素宽度的百分比。还可以只使用javascript。

You could however go for the method I suggested at first, but change the left property using a scroll event listener so that when you scroll, the left offset is increased or decreased. Because jQuery's bad-ass cross-browser support I'd go for jQuery. I think you can do practically the same with the prototype library, but I'm not familiar with that library.

您可以使用我最初建议的方法，但是使用滚动事件侦听器更改左侧属性，以便当您滚动时，左侧偏移量增加或减少。因为jQuery糟糕的跨浏览器支持，我选择jQuery。我认为你可以对原型库做同样的事情，但是我不熟悉那个库。

jQuery (worked in google chrome):

jQuery(曾在谷歌chrome工作):

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

Have a look at the live demo

看一下现场演示

You might need to change the document object to another object or selector of your choice.

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

#2

A whole lot of people want this, but unfortunately pure CSS does not offer a way to accomplish this very simple, very useful task. The only way that I have found is to give the div position:fixed. However, as you have found, this fixes the div on both the x and y axes.

很多人都希望这样，但不幸的是，纯CSS并没有提供一种方法来完成这个非常简单、非常有用的任务。我找到的唯一方法是给div位置:固定。但是，正如您所发现的，这将在x轴和y轴上修复div。

This is a big failing in CSS, in my opinion. We really need something like CSS position:fixed-x and position:fixed-y. The only way I have found to do this is to have a piece of JavaScript code that's entered on a SetInterval( ) timeout (I use .10 second) that repositions the div on the axis that needs to change.

在我看来，这是CSS的一大缺点。我们确实需要CSS位置:固定x和固定y。我发现要实现这一点的唯一方法是在SetInterval() timeout(我使用。10秒)上输入一段JavaScript代码，该代码将div重新定位到需要更改的轴上。

In your case (if I read your question correctly) you'd change the top: of DivB at each SetInterval( ) tick, moving DivB down to the position you want it in the viewport. Easy to do and it works, just a needless pain.

在您的例子中(如果我正确地阅读了您的问题)，您将在每个SetInterval()中更改div的顶部，将div移动到您希望它在viewport中的位置。这很容易做到，也很有效，只是一种不必要的痛苦。

You might ask, and rightly, why you (and I) can't do this manipulation when the scroll event fires. The answer is that the scroll event doesn't fire in some versions of IE.

您可能会问，并且正确地问，为什么当滚动事件触发时，您(和我)不能执行此操作。答案是，在某些版本的IE中，滚动事件不会触发。

If you can make this depend upon scroll event cross-browserly, that would be a huge advance.

如果您能使这取决于滚动事件的交叉浏览，那将是一个巨大的进步。

HTH.

HTH。

#3

This is easily done with the correct markup and CSS. You need a container (div, section, etc.) to contain your two content areas. In the following example, I exploit the way JSFiddle renders the fiddle's content, but the technique is the same outside of JSFiddle.

这很容易通过正确的标记和CSS实现。您需要一个容器(div, section等)来包含您的两个内容区域。在下面的示例中，我利用了JSFiddle渲染小提琴内容的方式，但是在JSFiddle之外的技术是相同的。

Live example.

生活的例子。

First, we need the markup:

首先，我们需要标记:

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

Next, the CSS:

接下来,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%;
}

In this example, I take advantage of the fact that JSFiddle will create a view port of limited size. Thus, I can specify all of my sizes in percentages.

在本例中，我利用了以下事实:JSFiddle将创建一个有限大小的视图端口。因此，我可以用百分比指定所有大小。

Notice that I set the container's position to relative. This is so that I can set the position model of divA and divB to "absolute" and "fixed" such that they will be positioned according to the box generated by "container". This is the key part of solving your problem.

注意，我将容器的位置设置为relative。这样我就可以将divA和divB的位置模型设置为“绝对”和“固定”，根据“container”生成的box进行定位。这是解决问题的关键部分。

#4

use position:fixed as style and set a fixed width for div. also set top and left or right in pixel.

使用位置:固定为样式，设置固定宽度，也可设置顶部、左右像素。