溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“如何解決移動端懸浮層遮擋住內(nèi)容”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
在現(xiàn)在的前端頁面中，尤其是移動端，經(jīng)常會需要將<header>或者是<footer>模塊懸浮出來，跟隨頁面的滑動保持定位在頁面的最上方或者是最下方，如下圖所示。
“回復主題”模塊，就是跟隨頁面的浮動一直懸浮在頁面的最下方，代碼結(jié)構如下。
代碼如下:
...
<section class='footer'>
<div class='reply-topic'>回復主題</div>
</section>
...
實現(xiàn)這樣的功能當然是利用position:fixed。但是，使用position:fixed有一個bug，以懸浮<footer>在最下方為例（懸浮<header>同理），當頁面滑到最下方的時候，由于是fixed定位，脫離了正常文檔流，導致會遮擋住一部分內(nèi)容。如下所示：
上面左邊是有問題的顯示，右邊為正常顯示。那么，如何解決這個問題呢？在此，我拋磚引玉提出三種我的看法，希望能有更好的方法。
法一. Javasrript解決
使用js解決，判定當滑動條滑到頁面內(nèi)容的最底端的時候，將原本會脫離文檔流的fixed定位改為不脫離文檔流的relative定位即可。
使用腳本解決問題是最繁重的方法，能用css解決的盡量不使用腳本，但是也是一種方法。
代碼如下:
//滾動條在Y軸上的滾動距離
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> //滑動監(jiān)聽
window.onscroll = function(){
//滑到底部時footer定于最下方,假定<footer>的height為60
if((getScrollHeight() - getScrollTop() - getWindowHeight()) > 61)
$('.footer').css('position','fixed');
else
$('.footer').css('position','relative');
}
法二.給body加上padding-bottom
給html<body>標簽加上一個padding-bottom屬性，這樣正常文檔流的內(nèi)容距離body底部就會產(chǎn)生一個padding-bottom設置的距離。
缺點是，考慮到現(xiàn)在項目上線之后模塊的復用及經(jīng)常需要合并css文件，當其他頁面不需要這個懸浮塊，就會給不需要<footer>fixed定位的頁面造成負擔，不推薦使用這種方法。
代碼如下:
//假定<footer>的高度為60px
body
{
padding-bottom: 60px;
}
法三.增加同級占位符<div>
個人認為這個方法最為實用，在<footer>塊之外再包裹一層div，然后再增加一個與<footer>同級的<div>塊，這個<div>塊的高度設置為與<footer>同樣高，不包含任何內(nèi)容，這樣就可以起到一個占位符的效果，在頁面最底占據(jù)與<footer>同樣高度的空間，當然頁面滑到最下方，原本的<footer>懸動塊就會與這個占位塊完美重疊。且不會對其他頁面產(chǎn)生影響。代碼如下：
唯一缺點是不符合語義化，增加了無實質(zhì)內(nèi)容的空標簽。
代碼如下:
<!-- footer外包裹一層div-->
<div>
<!--充當占位符的div塊，無實質(zhì)內(nèi)容 -->
<div ></div> </p>
<p> <!--fixed懸浮出來的footer -->
<section class='footer'>
<div class='reply-topic'>回復主題</div>
</section>
</div>
“如何解決移動端懸浮層遮擋住內(nèi)容”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
