【技巧篇】解決懸浮的、遮擋內容的處理技巧

時間 2019-11-20

標籤技巧篇解決懸浮遮擋內容處理技巧简体版

原文原文鏈接

引言

在如今的前端頁面中，尤爲是移動端，常常會須要將<header>或者是<footer>模塊懸浮出來，跟隨頁面的滑動保持定位在頁面的最上方或者是最下方，以下圖所示。css

「回覆主題」模塊，就是跟隨頁面的浮動一直懸浮在頁面的最下方，代碼結構以下。html

1 ... 2 <section class='footer'>
3     <div class='reply-topic'>回覆主題</div>
4 </section>
5 ...

實現這樣的功能固然是利用position:fixed。可是，使用position:fixed有一個bug，以懸浮<footer>在最下方爲例（懸浮<header>同理），當頁面滑到最下方的時候，因爲是fixed定位，脫離了正常文檔流，致使會遮擋住一部份內容。以下所示：前端

上面左邊是有問題的顯示，右邊爲正常顯示。那麼，如何解決這個問題呢？在此，我拋磚引玉提出三種個人見解，但願能有更好的方法。瀏覽器

法一. Javasrript解決

使用js解決，斷定當滑動條滑到頁面內容的最底端的時候，將本來會脫離文檔流的fixed定位改成不脫離文檔流的relative定位便可。spa

使用腳本解決問題是最繁重的方法，能用css解決的儘可能不使用腳本，可是也是一種方法。code

 1     //滾動條在Y軸上的滾動距離
 2     function getScrollTop(){  3         　　return document.body.scrollTop;  4  }  5     //文檔的總高度
 6     function getScrollHeight(){  7 
 8         　　return document.body.clientHeight;  9  } 10     //瀏覽器視口的高度
11     function getWindowHeight(){ 12         var windowHeight = 0; 13 　　　　 if(document.compatMode == "CSS1Compat") 14 　　　　{ 15 　　　　 　　windowHeight = document.documentElement.clientHeight; 16 　　　　} 17 　　　　else
18 　　 { 19 　　　　　　windowHeight = document.body.clientHeight; 20 　　　　} 21 　　　　return windowHeight; 22  } 23 
24     //滑動監聽
25 　　window.onscroll = function(){ 26        //滑到底部時footer定於最下方,假定<footer>的height爲60
27        if((getScrollHeight() - getScrollTop() - getWindowHeight()) > 61) 28            $('.footer').css('position','fixed'); 29        else
30            $('.footer').css('position','relative'); 31     }

法二.給body加上padding-bottom

給html<body>標籤加上一個padding-bottom屬性，這樣正常文檔流的內容距離body底部就會產生一個padding-bottom設置的距離。htm

缺點是，考慮到如今項目上線以後模塊的複用及常常須要合併css文件，當其餘頁面不須要這個懸浮塊，就會給不須要<footer>fixed定位的頁面形成負擔，不推薦使用這種方法。blog

1 //假定<footer>的高度爲60px 2 body 3 {
4  padding-bottom: 60px; 
5 }

法三.增長同級佔位符<div>

我的認爲這個方法最爲實用，在<footer>塊以外再包裹一層div，而後再增長一個與<footer>同級的<div>塊，這個<div>塊的高度設置爲與<footer>一樣高，不包含任何內容，這樣就能夠起到一個佔位符的效果，在頁面最底佔據與<footer>一樣高度的空間，固然頁面滑到最下方，本來的<footer>懸動塊就會與這個佔位塊完美重疊。且不會對其餘頁面產生影響。代碼以下：ip

惟一缺點是不符合語義化，增長了無實質內容的空標籤。文檔

 1 <!-- footer外包裹一層div-->
 2 <div>
 3     <!--充當佔位符的div塊，無實質內容 -->
 4     <div style="height:60px;"></div> 
 5 
 6     <!--fixed懸浮出來的footer -->
 7     <section class='footer'>
 8         <div class='reply-topic'>回覆主題</div>
 9     </section>
10 </div>