詳解BootStrap中Affix控制項的使用及保持布局的美觀的方法，bootstrapaffix

詳解BootStrap中Affix控制項的使用及保持布局的美觀的方法，bootstrapaffix

Affix是BootStrap中的一個很有用的控制項，他能夠監視瀏覽器的捲軸的位置並讓你的導航始終都在頁面的可視地區。一開始的時候，導航在頁面中是普通的流式布局，佔有文檔中固定的位置，當頁面滾動的時候，導航就自動變成了固定式配置（fixed）,始終處於使用者的視區，下面來說說他的用法。首先來看看他的實現原理。它是通過即時修改頁面元素的class屬性來實現的

開始的時候應用affix的元素的class中會自動添加affxi-top屬性

當捲軸滾動以至於導航快要到頁面頂部的時候這時候在元素的class中會將affix-top變為affix

當拖動捲軸到頁面底部的時候，affix又會自動變為affix-bottom

以上過程完全有控制項自己實現，無須我們幹預，我們只需要寫好這些狀態的css就可以了

如我們可以設定

.affix-top{top:150px;}.affix{top:20px;//通常用bootstrap構建的網站頭部都有個導航條}.affix-bottom{……} 

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

1、通過data屬性

你只需為需要監聽的頁面元素添加data-spy="affix"即可。然後使用位移量來確定一個元素的開和關.

<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狀態元素距離頁面頂端的位置。當滾動到頁面頂端的使用我們可以設定".affix"的樣式來重新設定其"top"值。

2、通過javascript調用

範例程式碼如下：

$('#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 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>

以上似乎已經介紹完了bootstrap中affix的使用，但是在實際使用的過程中我們會發現，當拖動捲軸的時候使用了affix的頁面元素的寬度會發生變化，從而導致頁面配置的雜亂，所以我們在定義affix的css中最好寫死它的寬度如：

.affix{width:250px;}

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

以上所述是小編給大家介紹的詳解BootStrap中Affix控制項的使用及保持布局的美觀的方法，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！