僅當滾動到底部時纔將頁腳固定到底部

我想將頁腳修復到瀏覽器窗口的底部，但只限於用戶已位於頁面最底部的情況。僅當滾動到底部時纔將頁腳固定到底部

如果您在Safari中注意到iOS 8或OS X Mavericks/Yosemite，當您滾動瀏覽頁面限制時，會顯示更多內容以獲取彈性反彈效果。當你有一個固定的頭部時，這看起來非常棒，它只是在頁面頂部顯示更多背景，而頭部完全固定，就像在本機應用上一樣。

但是，如果您的頁腳未固定在底部，則必須向下滾動頁面以查看頁腳，當用戶滾動到底部並滾動超過該限制時，會出現更多背景顏色在看起來相當糟糕的頁腳下面。因此，如果我能夠在發生這種情況時修復頁腳，那麼在滾動頁面限制時，它的行爲完全像總是固定的頁眉。

這就是我想要改變的 - 滾動頁面後通知白色出現在頁腳下方。如果頁腳固定在底部，則不會發生，而是在頁腳上方添加空格。

demonstration

這是我想要得到的東西 - 注意頁腳不低於其上添加了更多的黃色。我只是想這樣做，但我不希望頁腳總是固定的 - 它應該靜態定位，以便在它們滾動到底部之前不可見，然後一旦它位於底部，就應該固定以獲得所需的頁面限制滾動行爲。當然，滾動備份應該再次靜態定位。

JSBin Code
enter image description here

這是爲position:sticky工作？我更喜歡JavaScript/jQuery中的純CSS解決方案。

來源

2014-10-29 Joey

您將需要使用Javascript/jQuery的，爲了做到這一點，你需要一個腳本來取決於有多少爲了向下滾動用戶完成這個效果 – 2014-10-29 06:03:56

添加和刪除類'位置：sticky'會真棒與工作，[但它基本上沒有值得提及的瀏覽器支持]（http://caniuse.com/#feat=css-sticky）:( – misterManSam 2014-10-29 07:01:38

@misterManSam考慮到Safari是唯一有此行爲的瀏覽器，並且'位置：sticky是在Safari（'-webkit'）中支持的，這很好，如果可以用來獲得所需的行爲，我更喜歡使用它。我只看到它用於爲段 – Joey 2014-10-29 14:35:02

這應該工作...！祝你好運！！

#footer { 
position:fixed; 
left:0px; 
bottom:0px; 
height:30px; 
width:100%; 
background:#999; 
} 

/* IE 6 */ 
* html 

#footer 
{ 
position:absolute; 
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); 
}

來源

2014-10-29 17:09:43

這似乎將頁腳靜態放置在瀏覽器窗口的底部，因此它會覆蓋主體內容，然後在滾動時它不會移動，因此頁腳不會位於頁面的底部。你有沒有一個例子，這個代碼可以根據需要工作？ – Joey 2014-10-29 17:15:03

僅當滾動到底部時纔將頁腳固定到底部

回答

相關問題