本篇內(nèi)容介紹了“如何解決移動端懸浮層遮擋住內(nèi)容”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
創(chuàng)新互聯(lián)建站專注骨干網(wǎng)絡(luò)服務(wù)器租用10余年,服務(wù)更有保障!服務(wù)器租用,鄭州服務(wù)器托管 成都服務(wù)器租用,成都服務(wù)器托管,骨干網(wǎng)絡(luò)帶寬,享受低延遲,高速訪問。靈活、實現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。
在現(xiàn)在的前端頁面中,尤其是移動端,經(jīng)常會需要將
“回復(fù)主題”模塊,就是跟隨頁面的浮動一直懸浮在頁面的最下方,代碼結(jié)構(gòu)如下。
代碼如下:
...
...
實現(xiàn)這樣的功能當(dāng)然是利用position:fixed。但是,使用position:fixed有一個bug,以懸浮
上面左邊是有問題的顯示,右邊為正常顯示。那么,如何解決這個問題呢?在此,我拋磚引玉提出三種我的看法,希望能有更好的方法。
法一. 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定于最下方,假定
法二.給body加上padding-bottom
給html
標(biāo)簽加上一個padding-bottom屬性,這樣正常文檔流的內(nèi)容距離body底部就會產(chǎn)生一個padding-bottom設(shè)置的距離。缺點是,考慮到現(xiàn)在項目上線之后模塊的復(fù)用及經(jīng)常需要合并css文件,當(dāng)其他頁面不需要這個懸浮塊,就會給不需要
代碼如下:
//假定
法三.增加同級占位符 個人認為這個方法最為實用,在其他資訊