在“position:relative”容器div内，将一个div垂直“fixed”并水平“absolute”定位。

Question

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

这个div必须在一个“Position:Relative” 的div内部。

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

到目前为止，我只能得到一个基本上就是在一个相对定位的div中使用了一个固定的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实现的方法，只要能够支持所有现代浏览器和IE7、IE8，我就可以使用JavaScript。(这也是为什么我添加了JavaScript标签的原因)

有人能帮帮我吗？

- Flickdraw

Answer 1

使用JQuery，使用文档的scrollLeft()属性！这将起作用。

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

参见

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

祝好运！

编辑：如果你想要使用你预设的左边距而不是硬编码的"400"，使用

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

- Willem Mulder

---

谢谢回复，这在所有最新的浏览器上都很好用！不幸的是，它不能解决IE8上的问题。有没有办法让它在IE8上工作？ - Flickdraw

啊，好发现。应该是$(windows).scroll(...)。已更新我的答案！ - Willem Mulder

我正想自己问这个问题，然后在相关问题中找到了这个。有没有一个不需要 jQuery 的实现我可以使用？ - Patrick Roberts

Answer 2

使用原生JavaScript的代码如下所示：

var bb = document.getElementById('blue-box');
window.addEventListener('scroll',function(event){
    bb.style.marginLeft = window.scrollX + 'px';
});

在现代浏览器中，截至2020年，您应该尝试使用CSS position:fixed; 而不是JavaScript定位，因为它现在得到了广泛支持。

- ADJenks

Answer 3

这是我的解决方案（在Opera和Firefox中测试过）：http://jsfiddle.net/cCH2Z/2 诀窍是指定right: 0px;，这将使框距离窗口右边界为0像素。

- Marijn van Vliet

---

这并没有在水平轴上绝对定位容器div内的div。我需要保持蓝色框在容器内的水平位置不变。因此，它将始终保持相对于容器div的margin-left:400px;。这样，当用户水平滚动时，蓝色框将随容器一起移动。 - Flickdraw