在"位置:相对"容器Div中,将Div"固定"垂直放置,将"绝对"放置在水平位置

Question

我正在寻找一种方法可以创建一个div,它将垂直固定在页面上,因此如果用户向下滚动,div将保持在页面上的相同位置.但是它的位置绝对水平,所以如果用户屏幕比我的网页更窄,向右或向左滚动不会导致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来帮助演示这个问题.

这适用于垂直方向,但是如果您调整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/

祝好运!

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

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