引言
在現在的前端頁面中，尤其是移動端，經常會需要將<header>或者是<footer>模塊懸浮出來，跟隨頁面的滑動保持定位在頁面的最上方或者是最下方，如下圖所示。
“回復主題”模塊，就是跟隨頁面的浮動一直懸浮在頁面的最下方，代碼結構如下。
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定位即可。
使用腳本解決問題是最繁重的方法，能用css解決的盡量不使用腳本，但是也是一種方法。
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設置的距離。
缺點是，考慮到現在項目上線之后模塊的復用及經常需要合並css文件，當其他頁面不需要這個懸浮塊，就會給不需要<footer>fixed定位的頁面造成負擔，不推薦使用這種方法。
1 //假定<footer>的高度為60px 2 body 3 {
4 padding-bottom: 60px;
5 }
法三.增加同級占位符<div>
個人認為這個方法最為實用，在<footer>塊之外再包裹一層div，然后再增加一個與<footer>同級的<div>塊，這個<div>塊的高度設置為與<footer>同樣高，不包含任何內容，這樣就可以起到一個占位符的效果，在頁面最底占據與<footer>同樣高度的空間，當然頁面滑到最下方，原本的<footer>懸動塊就會與這個占位塊完美重疊。且不會對其他頁面產生影響。代碼如下：
唯一缺點是不符合語義化，增加了無實質內容的空標簽。
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>
以上是我想到的三種方法，才疏學淺，文中若有紕漏錯誤或者有更好的方法，萬望告知，感謝。