Bootstrap JS 固定
JS 固定 (affix.js)
固定插件允许元素固定（锁定）到页面上的某个区域。这通常用于导航菜单或社交图标按钮，使其在页面上下滚动时 "粘贴" 在特定区域。
此插件根据滚动位置切换此行为的开和关（更改 CSS position 的值，从 static 到 fixed）。
固定插件在三个类之间切换：.affix、.affix-top 和 .affix-bottom。每个类代表一个特定的状态。您必须添加 CSS 属性来处理实际位置，除了 .affix 类上的 position:fixed。
有关更多信息，请阅读我们的 Bootstrap 固定教程。
提示：固定插件通常与 滚动间谍 插件一起使用。
通过 data-* 属性
在要监视的元素上添加 data-spy="affix"，并在 data-offset-top|bottom="number" 属性中添加计算滚动位置的属性。
通过 JavaScript
使用以下方法手动启用
固定选项
选项可以通过 data 属性或 JavaScript 传递。对于 data 属性，将选项名称追加到 data-，例如 data-offset="”。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| offset | 数字 | 对象 | 函数 | 10 | 指定在计算滚动位置时从屏幕偏移的像素数。使用单个数字时，偏移量会添加到顶部和底部方向。如果您只想控制顶部或底部，请使用对象，例如 offset: {top:25}对于多个偏移量，使用 offset: {top:25, bottom:50}提示：使用函数动态提供偏移量（对于响应式设计很有用） |
| target | 选择器 | 节点 | 元素 | 窗口对象 | 指定固定的目标元素 |
固定事件
下表列出了所有可用的固定事件。
| 事件 | 描述 | 试一试 |
|---|---|---|
| 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 自动固定导航栏
使用 jQuery 的 outerHeight() 方法，在用户滚动经过指定元素（<header>）后固定导航栏
滚动间谍和固定
将固定插件与 滚动间谍 插件一起使用
水平菜单（导航栏）
<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>
亲自试一试 »
固定时的动画导航栏
使用 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;
}
亲自试一试 »
