## 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}
});
```
- 第一章 . bootstrap介紹
- 第二章 . 全局CSS樣式
- 1、總體注意事項
- 2、柵格系統
- 3、排版
- 4、代碼
- 5、表格
- 6、表單
- 7、 按鈕
- 8、 圖片
- 9、輔助類
- 10、響應式工具
- 第三章 . bootstrap相關CSS應用
- 1、CSS媒體查詢 @media
- 2、px,em,rem之間的關系和換算方式
- 第四章 . 組件
- 1、Glyphicons 字體圖標
- 2、下拉菜單
- 3、按鈕組
- 4、按鈕式下拉菜單
- 5、輸入框組
- 6、導航
- 7、導航條
- 8、路徑導航
- 9、分頁
- 10、標簽
- 11、徽章
- 12、巨幕
- 13、頁頭
- 14、縮略圖
- 15、警告框
- 16、進度條
- 17、媒體對象
- 18、列表組
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、過渡效果 (transition.js)
- 3、模態框 (modal.js)
- 4、下拉菜單 (dropdown.js)
- 5、滾動監聽 (scrollspy.js)
- 6、可切換標簽 (tab.js)
- 7、工具提示 (tooltip.js)
- 8、彈出框 (popover.js)
- 9、警告信息 (alert.js)
- 10、按鈕 (button.js)
- 11、折疊插件(collapse.js)
- 12、輪播插件(carousel.js)
- 13、Affix插件(affix.js)