Bootstrap 附加導航（Affix）插件 問題與解決方式

使用 Bootstrap 附加導航（Affix）插件 出現各類問題：記錄下解決問題的方式，供你們使用參考，言有不當，歡迎拍磚。

★  Link點擊後的位置偏移 

    點擊側導航條時，頁面上指定的Link會滾動太高，被頂導航條遮住。這個貌似不是Affix的問題，而是頂導航條固定位置的緣由。也能夠定義到外層div中，這個本身發揮

Css代碼 

/* Janky fix for preventing navbar from overlapping */  
h1[id] {  
  padding-top: 80px;  
  margin-top: -45px;  
}

 原理是好比想要35px的間隙，不能直接寫35px。須要 top padding設置成80px，防止頂導航條遮擋。

 而後再設置 top margin 爲 -45px，以達到35px的效果。

 

 ★  滾動頁面時尺寸會改變 
  還有個問題就是滾動頁面，當側邊導航條浮起時會改變尺寸。 

  個人解決方式 是 使用 js 來動態更改 它 的 寬度

Html代碼      附加導航的代碼結構 

<div class="row">
        <div class="col-xs-3" id="myScrollspy">
            <ul id="affix-ui" class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
                <li class="active"><a href="#section-1">第一部分</a></li>
                <li><a href="#section-2">第二部分</a></li>
                <li><a href="#section-3">第三部分</a></li>
                <li><a href="#section-4">第四部分</a></li>
            </ul>
        </div>
        <div class="col-xs-9">內容部分</div>
</div>

JavaScript代碼 

<script>
//初始化
   $(function(){
      updateLogin(); //載入數據
   });
//頁面改變事件
   window.onresize = function(){  
                updateLogin();
            }
//更新數據            
   function updateLogin() {
       $("#affix-ui").width($(".col-xs-3").width());
   };
</script>