javascript 在“Position:Relative”容器 Div 中垂直“固定”和水平“绝对”定位 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8327093/
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
Position a Div "Fixed" Vertically and "Absolute" Horizontally within a "Position:Relative" Container Div
提问by Flickdraw
I'm looking for a way I can create a div which will be fixed on the page vertically, so if the user scrolls down, the div stays at the same place on the page. But have it positioned absolutely horizontally, so if the users screen is narrower than my webpage, scrolling to the right or left will not cause the div to move with the screen and, in some cases, remain either half visible at the edge of the screen or off the page completely.
我正在寻找一种可以创建垂直固定在页面上的 div 的方法，因此如果用户向下滚动，该 div 将保留在页面上的同一位置。但是让它绝对水平放置，所以如果用户屏幕比我的网页窄，向右或向左滚动不会导致 div 随屏幕移动，并且在某些情况下，在屏幕边缘保持一半可见或完全离开页面。
This div must be within a "Position:Relative" Div.
此 div 必须在“Position:Relative”Div 内。
I'm fairly sure there is no way to assign different positions to the varying axis of a div but this is the best way to describe the effect which I am hoping to achieve.
我相当确定没有办法为 div 的不同轴分配不同的位置，但这是描述我希望达到的效果的最佳方式。
I have this so far, which is basically just a Fixed Div within a Relative Div.
到目前为止，我有这个，它基本上只是一个相对 Div 中的固定 Div。
CSS
CSS
#container {
position:relative;
width:700px;
height:1000px;
top:50px;
left:50px;
background-color:yellow;
}
#blue-box{
position:fixed;
width:100px;
height:100px;
background-color:blue;
margin-top:20px;
margin-left:400px;
{
HTML
HTML
<div id="container">
<div id="blue-box"></div>
</div>
I have also created a jsFiddleto help demonstrate the problem.
我还创建了一个jsFiddle来帮助演示这个问题。
This works fine for the vertical, but if you resize your web-browser so that it is narrower than the yellow box (container) and then scroll horizontally, the blue box will move with the page. I'm hoping to stop that from happening.
这适用于垂直方向，但如果您调整 Web 浏览器的大小使其比黄色框（容器）窄，然后水平滚动，则蓝色框将随页面移动。我希望阻止这种情况发生。
If there is no way to achieve this through CSS, I'm perfectly happy to use JavaScript as long as it works with all modern browsers and both IE7 and IE8. (Which is why I have added the JavaScript tag)
如果没有办法通过 CSS 实现这一点，我非常乐意使用 JavaScript，只要它适用于所有现代浏览器以及 IE7 和 IE8。（这就是我添加 JavaScript 标签的原因）
Can anyone help me out?
谁能帮我吗？
回答by Willem Mulder
With JQuery, use the scrollLeft() property of the document! This would work
使用 JQuery，使用文档的 scrollLeft() 属性！这会工作
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", 400-$(document).scrollLeft());
});
See also
也可以看看
Good luck!
祝你好运！
Edit: If you want it to use your preset margin-left instead of a hard-coded "400", use
编辑：如果您希望它使用预设的左边距而不是硬编码的“400”，请使用
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft());
});
回答by ADJenks
To link a #blue-box element to the horizontal scroll of a window using vanilla javascript would be something like this:
使用 vanilla javascript 将 #blue-box 元素链接到窗口的水平滚动将是这样的：
var bb = document.getElementById('blue-box');
window.addEventListener('scroll',function(event){
bb.style.marginLeft = window.scrollX + 'px';
});
If it had a margin originally defined in px, don't forget to trim off the 'px' from the end of the string, and then convert the text to an int prior to adding the window.scrollX offset. Then put the 'px' back on the end. Functions like String.replace()and parseInt()would help with that.
如果它有一个最初以 px 定义的边距，请不要忘记从字符串的末尾剪掉 'px'，然后在添加 window.scrollX 偏移量之前将文本转换为 int。然后把'px'放回最后。功能，如String.replace()并parseInt()会与帮助。
回答by Marijn van Vliet
Here's my solution (tested in Opera and Firefox): http://jsfiddle.net/cCH2Z/2The trick is to specify right: 0px;, this will position the box 0px from the right border of the window.
这是我的解决方案（在 Opera 和 Firefox 中测试）：http: //jsfiddle.net/cCH2Z/2诀窍是指定right: 0px;，这会将框定位在距离窗口右边框 0px 的位置。
