DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 移動端解決懸浮層(懸浮header、footer)會遮擋住內容的3種方法
移動端解決懸浮層(懸浮header、footer)會遮擋住內容的3種方法
編輯:HTML5詳解     
這篇文章主要介紹了移動端解決懸浮層(懸浮header、footer)會遮擋住內容的3種方法,本文講解如何解決移動端懸浮層會遮擋住內容的3種方法,需要的朋友可以參考下

在現在的前端頁面中,尤其是移動端,經常會需要將<header>或者是<footer>模塊懸浮出來,跟隨頁面的滑動保持定位在頁面的最上方或者是最下方,如下圖所示。

“回復主題”模塊,就是跟隨頁面的浮動一直懸浮在頁面的最下方,代碼結構如下。


復制代碼代碼如下:
...
<section class='footer'>
<div class='reply-topic'>回復主題</div>
</section>
...

實現這樣的功能當然是利用position:fixed。但是,使用position:fixed有一個bug,以懸浮<footer>在最下方為例(懸浮<header>同理),當頁面滑到最下方的時候,由於是fixed定位,脫離了正常文檔流,導致會遮擋住一部分內容。如下所示:

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

法一. Javasrript解決

  使用JS解決,判定當滑動條滑到頁面內容的最底端的時候,將原本會脫離文檔流的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> //滑動監聽
  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屬性,這樣正常文檔流的內容距離body底部就會產生一個padding-bottom設置的距離。

  缺點是,考慮到現在項目上線之後模塊的復用及經常需要合並CSS文件,當其他頁面不需要這個懸浮塊,就會給不需要<footer>fixed定位的頁面造成負擔,不推薦使用這種方法。

復制代碼代碼如下:
//假定<footer>的高度為60px
body 
{
padding-bottom: 60px; 
}

法三.增加同級占位符<div>

  個人認為這個方法最為實用,在<footer>塊之外再包裹一層div,然後再增加一個與<footer>同級的<div>塊,這個<div>塊的高度設置為與<footer>同樣高,不包含任何內容,這樣就可以起到一個占位符的效果,在頁面最底占據與<footer>同樣高度的空間,當然頁面滑到最下方,原本的<footer>懸動塊就會與這個占位塊完美重疊。且不會對其他頁面產生影響。代碼如下:

  唯一缺點是不符合語義化,增加了無實質內容的空標簽。

復制代碼代碼如下:
<!-- footer外包裹一層div-->
<div>
<!--充當占位符的div塊,無實質內容 -->
<div style="height:60px;"></div> </p><p> <!--fixed懸浮出來的footer -->
<section class='footer'>
<div class='reply-topic'>回復主題</div>
</section>
</div>

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved