移動(dòng)端解決懸浮層（懸浮header、footer）會(huì)遮擋住內(nèi)容的3種方法
我要評(píng)論在現(xiàn)在的前端頁(yè)面中，尤其是移動(dòng)端，經(jīng)常會(huì)需要將<header>或者是<footer>模塊懸浮出來(lái)，跟隨頁(yè)面的滑動(dòng)保持定位在頁(yè)面的最上方或者是最下方，如下圖所示。
“回復(fù)主題”模塊，就是跟隨頁(yè)面的浮動(dòng)一直懸浮在頁(yè)面的最下方，代碼結(jié)構(gòu)如下。
...
<section class='footer'>
<div class='reply-topic'>回復(fù)主題</div>
</section>
...
實(shí)現(xiàn)這樣的功能當(dāng)然是利用position:fixed。但是，使用position:fixed有一個(gè)bug，以懸浮<footer>在最下方為例（懸浮<header>同理），當(dāng)頁(yè)面滑到最下方的時(shí)候，由于是fixed定位，脫離了正常文檔流，導(dǎo)致會(huì)遮擋住一部分內(nèi)容。如下所示：
上面左邊是有問(wèn)題的顯示，右邊為正常顯示。那么，如何解決這個(gè)問(wèn)題呢？在此，我拋磚引玉提出三種我的看法，希望能有更好的方法。
法一. Javasrript解決
使用js解決，判定當(dāng)滑動(dòng)條滑到頁(yè)面內(nèi)容的最底端的時(shí)候，將原本會(huì)脫離文檔流的fixed定位改為不脫離文檔流的relative定位即可。
使用腳本解決問(wèn)題是最繁重的方法，能用css解決的盡量不使用腳本，但是也是一種方法。
//滾動(dòng)條在Y軸上的滾動(dòng)距離
function getScrollTop(){
return document.body.scrollTop;
}
//文檔的總高度
function getScrollHeight(){</p> <p> return document.body.clientHeight;
}
//瀏覽器視口的高度
function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat")
{
windowHeight = document.documentElement.clientHeight;
}
else
{
windowHeight = document.body.clientHeight;
}
return windowHeight;
}</p> <p> //滑動(dòng)監(jiān)聽(tīng)
window.onscroll = function(){
//滑到底部時(shí)footer定于最下方,假定<footer>的height為60
if((getScrollHeight() - getScrollTop() - getWindowHeight()) > 61)
$('.footer').css('position','fixed');
else
$('.footer').css('position','relative');
}
法二.給body加上padding-bottom
給html<body>標(biāo)簽加上一個(gè)padding-bottom屬性，這樣正常文檔流的內(nèi)容距離body底部就會(huì)產(chǎn)生一個(gè)padding-bottom設(shè)置的距離。
缺點(diǎn)是，考慮到現(xiàn)在項(xiàng)目上線之后模塊的復(fù)用及經(jīng)常需要合并css文件，當(dāng)其他頁(yè)面不需要這個(gè)懸浮塊，就會(huì)給不需要<footer>fixed定位的頁(yè)面造成負(fù)擔(dān)，不推薦使用這種方法。
//假定<footer>的高度為60px
body
{
padding-bottom: 60px;
}
法三.增加同級(jí)占位符<div>
個(gè)人認(rèn)為這個(gè)方法最為實(shí)用，在<footer>塊之外再包裹一層div，然后再增加一個(gè)與<footer>同級(jí)的<div>塊，這個(gè)<div>塊的高度設(shè)置為與<footer>同樣高，不包含任何內(nèi)容，這樣就可以起到一個(gè)占位符的效果，在頁(yè)面最底占據(jù)與<footer>同樣高度的空間，當(dāng)然頁(yè)面滑到最下方，原本的<footer>懸動(dòng)塊就會(huì)與這個(gè)占位塊完美重疊。且不會(huì)對(duì)其他頁(yè)面產(chǎn)生影響。代碼如下：
唯一缺點(diǎn)是不符合語(yǔ)義化，增加了無(wú)實(shí)質(zhì)內(nèi)容的空標(biāo)簽。
<!-- footer外包裹一層div-->
<div>
<!--充當(dāng)占位符的div塊，無(wú)實(shí)質(zhì)內(nèi)容 -->
<div style="height:60px;"></div> </p> <p> <!--fixed懸浮出來(lái)的footer -->
<section class='footer'>
<div class='reply-topic'>回復(fù)主題</div>
</section>
</div>
以上是我想到的三種方法，才疏學(xué)淺，文中若有紕漏錯(cuò)誤或者有更好的方法，萬(wàn)望告知，感謝。
相關(guān)文章
html的footer置于頁(yè)面最底部的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇html的footer置于頁(yè)面最底部的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-13純css 實(shí)現(xiàn)footer 一直在頁(yè)面底部，不隨頁(yè)面滾動(dòng)
CSS的簡(jiǎn)單在于它易學(xué)，CSS的困難在于尋找更好的解決方案。在CSS的世界里，似乎沒(méi)有完美這種說(shuō)法。所以，現(xiàn)在介紹的CSS絕對(duì)底部，只是目前個(gè)人見(jiàn)過(guò)的方案中比較完美的吧。2014-09-02讓footer始終位于頁(yè)面的最底部不隨滾動(dòng)而滾動(dòng)
本節(jié)主要介紹了如何讓footer始終位于頁(yè)面的最底部不隨滾動(dòng)而滾動(dòng)，此效果在網(wǎng)頁(yè)中非常實(shí)用，建議大家好好學(xué)習(xí)哦2014-07-28div footer標(biāo)簽css實(shí)現(xiàn)位于頁(yè)面底部固定
Web頁(yè)面的“footer”部分隨著飄上來(lái)，處在頁(yè)面的半腰中間，給視覺(jué)效果帶來(lái)極大的影響，讓你的頁(yè)面看上去很不好看，特別是現(xiàn)在寬屏越來(lái)越多，這種現(xiàn)象更是常見(jiàn),本文將介紹兩2012-12-02- 這個(gè)網(wǎng)頁(yè)即使內(nèi)容很少的情況下，它也始終在頁(yè)面的底部。否則頁(yè)面底部將留下大量空白。2009-10-20
利用CSS使footer固定在頁(yè)面底部的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇利用CSS使footer固定在頁(yè)面底部的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-13