這篇文章主要介紹了移動端解決懸浮層（懸浮footer）會遮擋住內(nèi)容的3種方法,對于header的懸浮不在做更多的解釋因為我們都可以通過判斷scrolltop的數(shù)字直接修改header的css樣式中的position的值由relative變?yōu)閒ixed就算是已經(jīng)解決還是比較簡單的趣斤。這篇主要考慮的footer的情況俩块。
在現(xiàn)在的前端頁面中，尤其是移動端浓领，經(jīng)常會需要<footer>模塊懸浮出來玉凯，跟隨頁面的滑動保持定位在頁面的最上方或者是最下方，如下圖所示联贩。
“回復(fù)主題”模塊漫仆，就是跟隨頁面的浮動一直懸浮在頁面的最下方，代碼結(jié)構(gòu)如下撑蒜。
代碼如下:
<section class='footer'>
<div class='reply'>回復(fù)主題</div>
</section>
實現(xiàn)這樣的功能當(dāng)然是利用position:fixed歹啼。但是玄渗，使用position:fixed有一個bug座菠，以懸浮<footer>在最下方為例（懸浮<header>同理），當(dāng)頁面滑到最下方的時候藤树，由于是fixed定位浴滴，脫離了正常文檔流，導(dǎo)致會遮擋住一部分內(nèi)容岁钓。如下所示：
上面左邊是有問題的顯示升略，右邊為正常顯示。那么屡限，如何解決這個問題呢品嚣？在此，我拋磚引玉提出三種我的看法钧大，希望能有更好的方法翰撑。
法一. Javasrript解決
使用js解決，判定當(dāng)滑動條滑到頁面內(nèi)容的最底端的時候啊央，將原本會脫離文檔流的fixed定位改為不脫離文檔流的relative定位即可眶诈。
這是我不喜歡的方式涨醋，使用腳本解決問題是最繁重的方法，能用css解決的盡量不使用腳本逝撬，但是也是一種方法浴骂。
代碼如下:
//滾動條在Y軸上的滾動距離
function getScrollTop(){
return document.body.scrollTop;
}
//文檔的總高度
function getScrollHeight(){ return document.body.clientHeight;
}
//瀏覽器視口的高度
function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat")
{
windowHeight = document.documentElement.clientHeight;
}
else
{
windowHeight = document.body.clientHeight;
}
return windowHeight;
} //滑動監(jiān)聽
window.onscroll = function(){
//滑到底部時footer定于最下方,假定<footer>的height為60
if((getScrollHeight() - getScrollTop() - getWindowHeight()) > 61)
$('.footer').css('position','fixed');
else
$('.footer').css('position','relative');
}
哎！好復(fù)雜總結(jié)一句話就是計算頁面的總高度減去滾動的高度和窗體的高度得到的數(shù)字如果在某個自己設(shè)定的區(qū)間時則需要改變footer的css樣式宪潮。
法二.給body加上padding-bottom
給html<body>標(biāo)簽加上一個padding-bottom屬性溯警，這樣正常文檔流的內(nèi)容距離body底部就會產(chǎn)生一個padding-bottom設(shè)置的距離。
缺點是坎炼，考慮到現(xiàn)在項目上線之后模塊的復(fù)用及經(jīng)常需要合并css文件愧膀，當(dāng)其他頁面不需要這個懸浮塊，就會給不需要<footer>fixed定位的頁面造成負(fù)擔(dān)谣光。
代碼如下:
//假定<footer>的高度為60px
body
{
padding-bottom: 60px;
}
法三.增加同級占位符<div>
這個方法最為實用檩淋，在<body>層最下面加一層div，這個<div>塊的高度設(shè)置為與<footer>同樣高萄金，不包含任何內(nèi)容蟀悦，這樣就可以起到一個占位符的效果，在頁面最底占據(jù)與<footer>同樣高度的空間氧敢，當(dāng)然頁面滑到最下方日戈，原本的<footer>懸動塊就會與這個占位塊完美重疊。且不會對其他頁面產(chǎn)生影響孙乖。代碼如下：
唯一缺點是不符合語義化浙炼，增加了無實質(zhì)內(nèi)容的空標(biāo)簽。
代碼如下:
<!--充當(dāng)占位符的div塊唯袄，無實質(zhì)內(nèi)容 -->
<div style="height: 數(shù)值;"></div> <!--fixed懸浮出來的footer -->
<section class='footer'>
<div class='reply'>回復(fù)主題</div>
</section>
