在“Position:Relative”容器 Div 中垂直“固定”和水平“絕對”定位 Div

Question

我正在尋找一種方法可以創建一個垂直固定在頁面上的 div，因此如果用戶向下滾動，該 div 將保持在頁面上的同一位置。 但是讓它絕對水平放置，所以如果用戶屏幕比我的網頁窄，向右或向左滾動不會導致 div 隨屏幕移動，並且在某些情況下，在屏幕邊緣保持一半可見或完全離開頁面。

此 div 必須在“Position:Relative”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/

祝你好運！

編輯：如果您希望它使用預設的左邊距而不是硬編碼的“400”，請使用

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

Answer 2

使用 vanilla javascript 將是這樣的：

var bb = document.getElementById('blue-box');
window.addEventListener('scroll',function(event){
    bb.style.marginLeft = window.scrollX + 'px';
});

在現代瀏覽器中，截至 2020 年，您應該嘗試使用 CSS position:fixed; 而不是 JavaScript 定位，因為它現在被廣泛支持。

Answer 3

這是我的解決方案（在 Opera 和 Firefox 中測試）： http : //jsfiddle.net/cCH2Z/2訣竅是指定right: 0px; ，這會將框定位在距離窗口右邊框 0px 的位置。