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

開(kāi)始的時(shí)候應(yīng)用affix的元素的class中會(huì)自動(dòng)添加affxi-top屬性

當(dāng)滾動(dòng)條滾動(dòng)以至于導(dǎo)航快要到頁(yè)面頂部的時(shí)候這時(shí)候在元素的class中會(huì)將affix-top變?yōu)閍ffix

當(dāng)拖動(dòng)滾動(dòng)條到頁(yè)面底部的時(shí)候，affix又會(huì)自動(dòng)變?yōu)閍ffix-bottom

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

如我們可以設(shè)置

.affix-top{top:150px;}.affix{top:20px;//通常用bootstrap構(gòu)建的網(wǎng)站頭部都有個(gè)導(dǎo)航條}.affix-bottom{……} 

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

1、通過(guò)data屬性

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

<ul class="nav nav-tabs nav-stacked affix" data-spy="affix"data-offset-top="190"><li class="active"><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)元素距離頁(yè)面頂端的位置。當(dāng)滾動(dòng)到頁(yè)面頂端的使用我們可以設(shè)置".affix"的樣式來(lái)重新設(shè)置其"top"值。

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

示例代碼如下：

$('#myNav').affix({offset: {top: 100,//滾動(dòng)中距離頁(yè)面頂端的位置bottom: function () {//滾動(dòng)完成時(shí)距離頁(yè)面底部的位置return (this.bottom = $('.bs-footer').outerHeight(true))}}}) 

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

<ul class="nav nav-tabs nav-stacked affix" id="myNav"><li class="active"><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 class="bs-footer"></div>

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

.affix{width:250px;}

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

以上所述是小編給大家介紹的詳解BootStrap中Affix控件的使用及保持布局的美觀的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！