javascript - 在 "Fixed"容器 Div 中垂直放置一个 Div "Absolute"，水平放置一个 "Position:Relative"

Question

我正在寻找一种方法来创建一个垂直固定在页面上的 div，因此如果用户向下滚动，该 div 将保留在页面上的同一位置。但是让它绝对水平放置，所以如果用户屏幕比我的网页窄，向右或向左滚动不会导致 div 随屏幕移动，并且在某些情况下，在屏幕边缘保持一半可见或完全离开页面。

此 div 必须位于“Position:Relative”Div 内。

我相当确定没有办法将不同的位置分配给 div 的不同轴，但这是描述我希望达到的效果的最佳方式。

到目前为止我有这个，它基本上只是一个相对 Div 中的 Fixed Div。

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

<div id="container">
<div id="blue-box"></div>
</div>

我还创建了一个 jsFiddle以帮助证明问题。

这适用于垂直方向，但如果您调整网络浏览器的大小使其比黄色框(容器)窄，然后水平滚动，蓝色框将随页面移动。我希望阻止这种情况发生。

如果无法通过 CSS 实现这一点，我非常乐意使用 JavaScript，只要它适用于所有现代浏览器以及 IE7 和 IE8。 (这就是我添加 JavaScript 标签的原因)

谁能帮帮我？

Answer 1

对于 JQuery，使用文档的 scrollLeft() 属性!这行得通

$(window).scroll(function(event) {
   $("#blue-box").css("margin-left", 400-$(document).scrollLeft());
});

另见

http://jsfiddle.net/zhQkq/9/

祝你好运!

编辑:如果您希望它使用您预设的 margin-left 而不是硬编码的“400”，请使用

$(window).scroll(function(event) {
   $("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft());
});