位置一个div“固定”垂直和“绝对”水平中的“位置：相对” div容器

我正在寻找一种方法，我可以创造一个div将被垂直固定在页面上，因此，如果用户滚动下来，div停留在页面上的相同位置。但它的位置绝对水平，所以如果用户屏幕比我的网页窄，滚动到右侧或左侧不会导致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帮助说明问题。

这为立式工作正常，但如果调整您的网络浏览器，使得它比黄色盒子（容器）窄，然后水平滚动，蓝色框将与页面移动。我希望能够阻止这种情况的发生。

如果没有办法通过CSS来实现这一目标，我心甘情愿用JavaScript，只要它与所有现代浏览器和两个IE7和IE8的作品。（这就是为什么我添加JavaScript代码）

任何人都可以帮我吗？

来源

2011-11-30 Flickdraw

使用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()); 
});

来源

2011-11-30 14:38:31

感谢您的回复，这对所有最新的浏览器都很棒！不幸的是，它不能解决IE8上的问题。无论如何要让这个工作在IE8上？ – Flickdraw

啊，很好。它应该是$（windows）.scroll（...）。更新了我的答案！ –

真棒的东西。这现在完美了，谢谢！ – Flickdraw

-2

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

来源

2011-11-30 14:13:51

这并不绝对中，在水平轴上的容器DIV位置股利。我需要将蓝色方块保持在容器内水平的同一点。所以它将始终保持在margin-left：400px;相对于集装箱分区。因此，当用户水平滚动时，蓝色框将随容器一起移动。 – Flickdraw

位置一个div“固定”垂直和“绝对”水平中的“位置：相对” div容器

回答

相关问题