防止在固定位置元素後面滾動

我有一個頁腳固定在頁面底部並具有設定的高度。是否可以滾動我的頁面的內容，以便它在固定頁腳的頂部結束？防止在固定位置元素後面滾動

我的問題在這裏的小提琴：非固定元素的fiddle

最後250像素（頁腳高度）滾動頁腳後面，當滾動擊中頁面的底部都不見。

<div style="height: 500px; width: 50%; background-color: yellow;"></div> 
<div style="height: 500px; width: 50%; background-color: blue;"></div> 
<div style="height: 500px; width: 50%; background-color: green;"></div> 

<div style="position: fixed; width: 100%; height: 250px; bottom: 0; background-color: #ccc;"> 
    Fixed Footer 
</div>

來源

2017-10-12 noclist

這是你需要做的，但你需要編寫CSS，如果你寫CSS分開，而不是將是一件好事給div的風格屬性。

爲了解決您的問題，我們需要設置溢出爲隱藏詳細瞭解這些屬性here.

body, 
 
html{ 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
    }

<div style="height: 500px; width: 50%; background-color: yellow;"></div> 
 
<div style="height: 500px; width: 50%; background-color: blue;"></div> 
 
<div style="height: 500px; width: 50%; background-color: green;"></div> 
 

 
<div style="position: fixed; width: 100%; height: 250px; bottom: 0; background-color: #ccc;"> 
 
    Fixed Footer 
 
</div>

來源

2017-10-12 15:16:07

我只是用它作爲我的問題的一個例子，而不是提供外部樣式，感謝幫助 – noclist

@noclist，那太棒了！歡迎 –

添加的250像素保證金底上的最後一個DIV

<div style="height: 500px; width: 50%; background-color: green; margin-bottom:250px;"> 
</div>

來源

2017-10-12 15:15:54

偉大的想法，謝謝！ – noclist

防止在固定位置元素後面滾動

回答

相關問題