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
使用以下命令手动启用：
固钉选项
选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 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;
}
自己动手试一试 »
