13、Affix插件（affix.js） · Bootstrap前端響應式框架學習技術分享總結

## Affix插件 affix.js Affix插件（affix.js）是一個很有用的插件，它可以讓你的導航始終都固定在某個位置。一開始的時候，導航出現在頁面的某個位置，當頁面滾動一定距離時，無論頁面如何滾動，它都固定在一個位置，就像被帖在頁面上一樣。 **使用方法** **1.** 必須定義一個監聽頁面滾動的元素，它通常是 body 元素。需要給監聽元素定義 data-spy="scroll" 屬性來啟動滾動監聽功能，還要添加 data-target 屬性來指定監聽對象。 ```html <body data-spy="scroll" data-target="#affixMenu"> ``` **2.** 定義監聽對象，它通常是導航菜單。需要給它定義 data-spy="affix" 屬性來啟動Affix功能。 ```html <ul id="affixMenu" class="nav nav-list" data-spy="affix" data-offset-top="90"> <li><a href="#overview"> Overview</a></li> <li><a href="#transitions"> Transitions</a></li> <li><a href="#modals"> Modal</a></li> <li><a href="#dropdowns"> Dropdown</a></li> </ul> ``` **3.** 配置 offset 參數。offset 參數用來定義滾動距離，它是整數值，單位為 px，包括 data-offset-top 和 data-offset-bottom。如，data-offset-top="90" 表示滾動條從頂部向下滾動的距離大于 90px 時，監聽對象將會固定不動。 offset 參數可以使用 data 屬性設置，也可以使用JavaScript來設置。以下是用data 屬性設置： ```html <ul id="affixMenu" class="nav nav-list" data-spy="affix" data-offset-top="90"> ``` 使用JavaScript設置的格式為： ```js $('#affixMenu').affix(offset) ``` 參數 offset 的值可以是數值或對象。可以傳遞一個數值，它將同時作用于 data-offset-top 和 data-offset-bottom。也可以傳遞一個對象，為它們分別賦值。如下： ```js $('#affixMenu').affix({ offset: {top: 90, bottom: 90} }); ```