Bootstrap JS 附加导航参考
JS Affix (affix.js)
Affix 插件允许将元素附加（锁定）到页面上的某个区域。 这通常与导航菜单或社交图标按钮一起使用，以使它们在向上和向下滚动页面时"粘"在特定区域。
该插件根据滚动位置打开和关闭此行为（将 CSS 位置的值从静态更改为固定）。
词缀插件在三个类之间切换: .affix, .affix-top, 和
.affix-bottom.。 每个类代表一个特定的状态。 您必须添加 CSS 属性来处理实际位置，除了 .affix 类上的 position:fixed。
有关更多信息，请阅读我们的 Bootstrap Affix 教程。
提示: Affix 插件经常与Scrollspy 插件一起使用。
通过 data-* 属性
将 data-spy="affix" 添加到要监视的元素，并添加 data-offset-top|bottom="number"
属性来计算滚动的位置。
通过 JavaScript
手动启用:
Affix 选项
选项可以通过数据属性或 JavaScript 传递。 对于数据属性，将选项名称附加到 data-，如 data-offset="".
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| offset | number | object | function | 10 | 指定计算滚动位置时从屏幕偏移的像素数。 使用单个数字时，偏移会同时添加到顶部和底部方向。 如果您只想控制顶部或底部，请使用对象，例如 offset: {top:25}对于多个偏移量，使用 offset: {top:25, bottom:50}提示: 使用函数动态提供偏移量（对响应式设计很有用） |
| target | selector | node | element | the window object | 指定 affix 的目标元素 |
Affix 事件
下表列出了所有可用的 affix 事件。
| 事件 | 描述 | 试一试 |
|---|---|---|
| affix.bs.affix | 在将固定定位添加到元素之前发生（例如，当 .affix-top 类即将被 .affix 类替换时） |
测试一下 |
| affixed.bs.affix | 在将固定定位添加到元素后发生（例如，在 .affix-top 类替换为 .affix 类之后） |
测试一下 |
| affix-top.bs.affix | 在顶部元素返回其原始（非固定）位置之前发生（例如 .affix 类即将被 .affix-top替换） |
测试一下 |
| affixed-top.bs.affix | 在顶部元素返回其原始（非固定）位置后发生（例如 .affix 类已被 .affix-top替换） |
测试一下 |
| affix-bottom.bs.affix | 在底部元素返回其原始（非固定）位置之前发生（例如 .affix 类即将被 .affix-bottom替换） |
测试一下 |
| affixed-bottom.bs.affix | 在底部元素返回其原始（非固定）位置后发生（例如 .affix 类已替换为 .affix-bottom） |
测试一下 |
更多实例
附加导航栏
创建水平附加导航菜单:
使用 jQuery 自动附加导航栏
在用户滚动通过指定元素(<header>)后，使用 jQuery 的 outerHeight() 方法附加导航栏:
Scrollspy & Affix
将 Affix 插件与 Scrollspy 插件一起使用:
水平菜单（导航栏）
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
亲自试一试 »
垂直菜单（侧边栏）
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>
亲自试一试 »
affix 上的动画导航栏
使用 CSS 来操作不同的 .affix 类:
示例 - 在滚动时更改导航栏的背景颜色和填充
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff !important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
}
亲自试一试 »
示例 - 在导航栏中滑动
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}
亲自试一试 »
