Bootstrap JS 词缀
JS 词缀 (affix.js)
Affix 插件允许将元素附加（锁定）到页面上的某个区域。这通常与导航菜单或社交图标按钮一起使用，以便在上下滚动页面时使它们在特定区域"stick"。
该插件根据滚动位置打开和关闭此行为（将 CSS 位置的值从静态更改为固定）。
affix 插件在三个类之间切换：.affix,.affix-top， 和.affix-bottom。每个类别代表一个特定的状态。您必须添加 CSS 属性来处理实际位置，但以下情况除外position:fixed于.affix类。
欲了解更多信息，请阅读我们的Bootstrap 词缀教程。
提示：Affix 插件经常与滚动间谍插入。
通过 data-* 属性
添加data-spy="affix"到你想要监视的元素，以及data-offset-top|bottom="number"属性来计算滚动的位置。
通过JavaScript
手动启用：
附加选项
选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-，如 data-offset=""。
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | object | function | 10 | Specifies the number of pixels to offset from screen when calculating position of scroll. When using a single number, the offset is added to both top and bottom directions. If you only want to control the top or the bottom, use an object, like offset: {top:25}For multiple offsets, use offset: {top:25, bottom:50}Tip: Use a function to dynamically provide an offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifies the target element of the affix |
附加事件
下表列出了所有可用的附加事件。
| Event | Description | 尝试一下 |
|---|---|---|
| affix.bs.affix | Occurs before fixed positioning is added to the element (e.g, when the .affix-top class is about to be replaced with the .affix class) |
尝试一下 |
| affixed.bs.affix | Occurs after fixed positioning is added to the element (e.g., after the .affix-top class is replaced with the .affix class) |
尝试一下 |
| affix-top.bs.affix | Occurs before the top element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-top) |
尝试一下 |
| affixed-top.bs.affix | Occurs after the top element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-top) |
尝试一下 |
| affix-bottom.bs.affix | Occurs before the bottom element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-bottom) |
尝试一下 |
| affixed-bottom.bs.affix | Occurs after the bottom element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-bottom) |
尝试一下 |
更多示例
固定导航栏
创建水平固定导航菜单：
使用 jQuery 自动附加导航栏
使用 jQuery 的外部高度()在用户滚动经过指定元素（<header>）后附加导航栏的方法：
滚动监视和粘贴
将 Affix 插件与滚动间谍插入：
水平菜单（导航栏）
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
亲自试一试 »
垂直菜单 (Sidenav)
<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;
}
亲自试一试 »