頁面滾動時設置div位置

我知道類似的問題已被問到，但我沒有看到這一個。！頁面滾動時設置div位置

我在我的頁面上有3個div。

WRAP是主要的頁面包裝，並提供了內部div的邊框。

OUTER是外層div

右邊是我想移動的頁面滾動股利。

enter image description here

可以將此圖像，其中右坐在看到，隨着頁面滾動下來，我想向右移動與它。

我試着將CSS位置設置爲固定，但如果頁面大小調整了這個佈局。我目前擁有的CSS是：

#wrap 
{ 
    width: 100%; 
    margin: 50px auto; 
    padding: 20px 20px 20px 20px; 
    border:2px solid #800000; 
} 

#outer 
{ 
    margin: auto; 
    width: 700px; 
    height: 1250px; 
    display: table; 
    border: 2px solid #000008; 
} 

#right 
{ 
    float: right; 
    width: 100px; 
    height: 100px; 
    border: 2px solid #008000; 
}

我創建了一個fiddle這個目前的樣子。

如何正確移動頁面？

感謝

來源

2015-04-07 JeffVader

你是否正在尋找類似的產品？ https://jsfiddle.net/r2szxxvw/2/ – Nitesh

@NKL是的，但是..如果你調整頁面的大小，右邊的div位於不同的位置。如果你全屏運行小提琴，那麼正確的div現在不在Outer div之外，當它不應該。 – JeffVader

RouthMedia的回答作品，但如果你有不同的限制，如「它不應該在內容上，如果窗口比佈局更小的」

爲了解決這個問題，你可以有一個window.onresize功能根據你想要的約束改變div的正確位置。

window.onresize = function(event) 
{ 
    // is the window smaller than something it shouldn't? calculate the new position 
    ("#right").css("right", newpos); 
};

編輯：看見你不想出去的外層div的。

一種方法：當頁面加載時，將「right」屬性設置爲將其放入外部div的內容。如果屏幕調整大小，請更新它。

另一種方法：使用position: absolute，並在觸發onscroll事件時使用document.scrollTop值更新「top」屬性。

來源

2015-04-07 09:59:22 gbuzogany

Thx - 你有沒有scrollTop和onscroll的例子？ – JeffVader

https://jsfiddle.net/w360og9m/ – gbuzogany

gbuzongany - 謝謝你完美:) – JeffVader

添加position:fixed; right:0px;您#right股利。

來源

2015-04-07 09:52:56 RouthMedia

我做了，並推到外部股利之外的權利股利。 – JeffVader

我已經稍微改變了措辭 – RouthMedia

頁面滾動時設置div位置

回答

相關問題