javascript 如何垂直固定 div 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8475012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I have vertically fixed div element?
提问by Sam
I would like to have vertically but not horizontally fixed div element. Currently, I am using jQuery to update the position topevery 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 元素。目前，我top每次滚动时都使用 jQuery 来更新位置，但我不希望它看到移动。我希望它固定不动。有没有办法做到这一点？
-----------------
| | |
| | |
| div A | div B |
| | |
| | |
| | |
-----------------
Scrolling down
向下滚动
-----------------
| div A | |
| | |
| | div B |
| | |
| | |
| | |
-----------------
I would like to be able keep Div Bvertically fixed while Div Ascrolls down and up. But when I scroll to the right and left, I wand Div Aand Div Bto 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 使用了类似的东西。单击推文后，右侧显示推文详细信息的元素将被真正修复。我不确定他们是怎么做的。查看第二张图片，向下滚动时右侧面板保持固定。
Second image:
第二张图：
回答by Tim S.
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, bottomand leftproperties you can set the exact position of your div.
这正是它所说的那样，它固定了位置。通过使用top，right，bottom和left属性你可以设置你的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.
该属性position: fixed;不能仅影响一个轴上的定位属性。这意味着，您不能像您想要的那样向左或向右滚动。
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.
但是，您可以采用我最初建议的方法，但使用滚动事件侦听器更改 left 属性，以便在滚动时增加或减少左偏移量。因为 jQuery 糟糕的跨浏览器支持，我会选择 jQuery。我认为你可以用原型库做同样的事情，但我不熟悉那个库。
jQuery (worked in google chrome):
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()
});
});
Have a look at the live demo
看看现场演示
You might need to change the documentobject to another object or selector of your choice.
您可能需要将document对象更改为另一个对象或您选择的选择器。
回答by Pete Wilson
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 position:fixed-x 和 position:fixed-y 这样的东西。我发现这样做的唯一方法是在 SetInterval() 超时（我使用 0.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() 刻度处更改 DivB 的顶部：，将 DivB 向下移动到您希望它在视口中的位置。容易做，而且有效，只是一种不必要的痛苦。
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'tfire in some versions of IE.
您可能会问，为什么当滚动事件触发时您（和我）不能执行此操作，这是正确的。答案是在某些版本的 IE中不会触发滚动事件。
If you can make this depend upon scroll event cross-browserly, that would be a huge advance.
如果您可以跨浏览器使其依赖于滚动事件，那将是一个巨大的进步。
HTH.
哈。
回答by James Sumners
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 呈现 fiddle 内容的方式，但该技术在 JSFiddle 之外是相同的。
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.
请注意，我将容器的位置设置为相对位置。这样我就可以将 divA 和 divB 的位置模型设置为“绝对”和“固定”，这样它们将根据“容器”生成的框进行定位。这是解决您的问题的关键部分。
回答by Pritom
use position:fixedas style and set a fixed widthfor div. also set topand leftor rightin pixel.
使用position:fixed的样式，并设置固定width的div。也设置top和left或right在像素。
