修復網頁上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}); 

});