## 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）