位置一個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容器

回答

相關問題