Affix是BootStrap框架中的一個很有用的控件，他能夠監(jiān)視瀏覽器的滾動條的位置并讓你的導(dǎo)航始終都在頁面的可視區(qū)域。一開始的時候，導(dǎo)航在頁面中是普通的流式布局，占有文檔中固定的位置，當(dāng)頁面滾動的時候，導(dǎo)航就自動變成了固定布局（fixed）,始終處于用戶的視區(qū)，下面來說說他的用法。首先來看看他的實現(xiàn)原理。它是通過實時修改頁面元素的class屬性來實現(xiàn)的：

 

1、開始的時候應(yīng)用affix的元素的class中會自動添加affxi-top屬性

 

2、當(dāng)滾動條滾動以至于導(dǎo)航快要到頁面頂部的時候這時候在元素的class中會將affix-top變?yōu)?span>affix

 

3、當(dāng)拖動滾動條到頁面底部的時候，affix又會自動變?yōu)?span>affix-bottom

 

以上過程完全有控件自己實現(xiàn)，無須我們干預(yù)，我們只需要寫好這些狀態(tài)的css就可以了

 

如我們可以設(shè)置

 

.affix-top

{

    top:150px;

}

.affix

{

    top:20px;//通常用bootstrap構(gòu)建的網(wǎng)站頭部都有個導(dǎo)航條

}

.affix-bottom

{

    ……

}

下面我們看看它的使用方法

 

1、通過data屬性

你只需為需要監(jiān)聽的頁面元素添加data-spy="affix"即可。然后使用偏移量來確定一個元素的開和關(guān).

 

關(guān)鍵代碼

 

<ul class="nav nav-tabs nav-stacked affix" data-spy="affix"

            data-offset-top="190">

            <li><a href="#one">Tutorial One</a></li>

            <li><a href="#two">Tutorial Two</a></li>

            <li><a href="#three">Tutorial Three</a></li>

</ul>

其中data-offset-top為處于affix-top狀態(tài)元素距離頁面頂端的位置。當(dāng)滾動到頁面頂端的使用我們可以設(shè)置".affix"的樣式來重新設(shè)置其"top"值。

 

2、通過javascript調(diào)用

示例代碼如下：

 

$('#myNav').affix({

   offset: {

      top: 100,//滾動中距離頁面頂端的位置

      bottom: function () {//滾動完成時距離頁面底部的位置

         return (this.bottom =

            $('.bs-footer').outerHeight(true))

         }

      }

})

HTML代碼如下（只展示核心代碼）：

 

<ul class="nav nav-tabs nav-stacked affix" id="myNav">

            <li><a href="#one">Tutorial One</a></li>

            <li><a href="#two">Tutorial Two</a></li>

            <li><a href="#three">Tutorial Three</a></li>

</ul>

……

<div>

</div>

以上似乎已經(jīng)介紹完了 bootstrap 中affix的使用，但是在實際使用的過程中我們會發(fā)現(xiàn)，當(dāng)拖動滾動條的時候使用了 affix 的頁面元素的寬度會發(fā)生變化，從而導(dǎo)致頁面布局的雜亂，所以我們在定義affix的css中最好寫死它的寬度如：

 

.affix{

    width:250px;

}

這樣在視窗足夠大的時候是沒有任何問題的，但是當(dāng)拖動改變視窗的大小后會發(fā)現(xiàn)布局又變亂了，這個問題困擾了我許久，最后通過分析bootcss的源碼我發(fā)現(xiàn)該網(wǎng)站在所有使用affix的元素的class中都添加了"hidden-print" "hidden-xs" "hidden-sm"這些屬性，用于當(dāng)屏幕不是符合要求的情況下可以隱藏affix，雖然影響了易用性，但是保證了布局無論在哪種情況下都是整齊的。

 

 

文章來源：博客園