我們為什么要用bootstrap？因為懶！哦....不，是因為方便，呃...意思差不多。

今天來說說Affix這個插件，它可以使導航欄固定，免去了自己手寫的麻煩，用著非常方便，廢話不多說，下面是用法。

Affix用法：

通過 data 屬性：如需向元素添加附加導航（Affix）行為，只需要向需要監聽的元素添加data-spy="affix"即可。請使用偏移來定義何時切換元素的鎖定和移動。

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
     code...
</div>

data-spy : 該屬性可以讓導航欄固定，不過用了這個屬性可能會使你的頁面結構發生改變，比如CSS的層級或樣式問題。
data-offset-top : 該屬性用來設置距離頁面頂部偏移多少，然后再使導航定位。
data-offset-bottom : 該屬性用來設置距離頁面底部偏移多少，然后再使導航定位。

還有另一種方法：

通過 JavaScript：您可以通過 JavaScript 手動為某個元素添加附加導航（Affix），如下所示：

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

獲取到標簽，調用affix方法，用offset對象設置屬性和屬性值。

這個插件不管是橫豎的導航條都很實用，用法套路也是差不多的，還是看項目用哪種方法合適吧。

最后附上bootstrap中文網的affix鏈接，不過沒有中文翻譯：http://v3.bootcss.com/javascript/

總結

以上是生活随笔為你收集整理的Bootstrap中的Affix插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。