Question

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

此div必须位于“Position：Relative”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来帮助演示问题。

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

如果没有办法通过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/

祝你好运！

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

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

Answer 2

使用vanilla javascript将#blue-box元素链接到窗口的水平滚动条将是这样的：

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

如果它有一个最初在px中定义的保证金，请不要忘记删除＆＃39; px＆＃39;从字符串的末尾开始，然后在添加window.scrollX偏移量之前将文本转换为int。然后把＆＃39; px＆＃39;回到最后。像String.replace()和parseInt()这样的功能会对此有所帮助。

Answer 3

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

在“位置：相对”容器Div中，将Div“固定”垂直放置，将“绝对”放置在水平位置

3 个答案: