修复网页上div的位置

Question

我有一个位置已被修复的div。一切都很好，直到窗户重新调整大小。在重新调整大小时，当我们滚动到网页的最右侧部分时，固定div仍保留在屏幕的最左端。我希望它与窗口一起向左滚动，但不能随着窗口向下滚动。

如果我不清楚表达我的疑问。你可以有一个live demo here。

搜索任何产品说明Apple Ipod Touch那里。一旦显示结果，调整窗口大小并滚动到最右边的部分。

任何人都可以推荐一些CSS或Javascript来解决相同的问题。

谢谢！

Answer 1

我会重组你的布局，并删除固定的位置。例如像这样的东西。显然这不完全像你的代码。但是这个概念是一样的。如果你在同一个容器内的控件与结果和历史记录一样，它应该随它一起移动。

#wrapper { 
width:960px; 
margin:0 auto 0 auto; 
} 

#left-col, 
#right-col { 
width:100px; 
float:left; 
} 

#mid-col { 
width:710px; 
float:left; 
} 

<!-- holds your column containers --> 
<div id="wrapper"> 

<!-- your control --> 
<div id="left-col"> 
</div> 

<!-- your search results --> 
<div id="mid-col"> 
</div> 

<!-- your history --> 
<div id="right-col"> 
</div> 

</div> 

Answer 2

可以使用CSS Media Queries或Javascript。快速的方法是在Jquery $(window).resize方法。

Answer 3

我想你只需要至少对于我的工作对铬#completeSlider

删除

position: fixed。

编辑：

那么我会说你需要使用jQuery来处理这个问题。您不能同时拥有固定位置和相对于其他元素。不过除去position: fixed如上所述，并添加一些JQuery的魔法一样如下：

$(window).scroll(function() { 

$('#completeSlider').offset({ top: $(window).scrollTop(), left: 0}); 

}); 

好像标准$ jQuery的保留在网页上的一些其他功能...试试这个：

jQuery(window).scroll(function() { 

    jQuery('#completeSlider').offset({ top: jQuery(window).scrollTop(), left: 0}); 

});