行動端解決懸浮層（懸浮header、footer）會遮擋住內容的3種方法_html5教學技巧

在現在的前端頁面中，尤其是移動端，經常會需要將

或者是

模組懸浮出來，跟隨頁面的滑動保持定位在頁面的最上方或者是最下方，如下圖所示。

「回覆主題」模組，就是跟隨頁面的浮動一直懸浮在頁面的最下方，程式碼結構如下。

複製程式碼

程式碼如下:

...
程式碼如下:


...

回覆主題

...

實現這樣的功能當然是利用position:fixed。但是，使用position:fixed有一個bug，以懸浮

在最下方為例（懸浮

同理），當頁面滑到最下方的時候，由於是fixed定位，脫離了正常文檔流，導致會遮擋住一部分內容。如下圖所示：

上面左邊是有問題的顯示，右邊是正常顯示。那麼，如何解決這個問題呢？在此，我拋磚引玉提出三種我的看法，希望有更好的方法。

法一. Javasrript解決

　　使用js解決，判定當滑動條滑到頁面內容的最底端的時候，將原本會脫離文檔流的fixed定位改為不脫離文檔流的relative定位即可。

　　使用腳本解決問題是最繁重的方法，能用css解決的盡量不使用腳本，但是也是一種方法。

複製程式碼

程式碼如下:


////Y軸上的捲捲在Y軸上滾動距離
function getScrollTop(){
　　return document.body.scrollTop;
}
//文檔的總高度
function getScrollHeight(){(){(){(){(){()

　　return document.body.clientHeight;
}
//瀏覽器視口的高度
function getWindowHeight(){
var windowHeight = 0;
　　〜　. = "CSS1Compat")
　　　　{
　　　　 　　windowHeight = document.documentElement.clientHeight;
　　　　}
　　　　else
　　 {
　　　　　　windowHeight = document.body.clientHeight;
　　　　}
return windowHeight;
}

//滑動監聽
　　window.onscroll = function(){
//滑到底部時footer定於最下方,假定

的height為60
if((getScrollHeight() - getScrollTop() - getWindowHeight()) > 61)
$('.footer').css('position','fixed');
else

$('.footer').css ('position','relative'); }

　法二.給body加上padding-bottom

　　為html

標籤加上一個padding-bottom屬性，這樣正常文件流的內容距離body底部就會產生一個padding-bottom設定的距離。

　　缺點是，考慮到現在專案上線之後模組的複用及經常需要合併css文件，當其他頁面不需要這個懸浮塊，就會給不需要

fixed定位的頁面造成負擔，不推薦使用這種方法。

複製程式碼

程式碼如下:


///

的高度假定60px
body
{

padding-bottom: 60px; }

法三.增加同級佔位符

　　個人認為這個方法最為實用，在

塊之外再包裹一層div，然後再增加一個與

同級的

塊，這個

塊的高度設置為與同樣高，不包含任何內容，這樣就可以起到一個佔位符的效果，在頁面最底佔據與

同樣高度的空間，當然頁面滑到最下方，原本的

懸動塊就會與這個佔位塊完美重疊。並且不會對其他頁面產生影響。程式碼如下：

　　唯一缺點是不符合語意化，增加了無實質內容的空標籤。

複製程式碼

程式碼如下:

回覆主題

section>

　以上是我想到的三種方法，才疏學淺，文中若有紕漏錯誤或者有更好的方法，萬望告知，感謝。