Bootstrap JS Affix
JS Affix (affix.js)
Affix 插件可用将元素粘贴（锁定）到页面上的某个区域。它通常与导航菜单或社交图标按钮一起使用，使它们在页面上下滚动时 "粘" 在特定区域。该插件会根据滚动位置来打开和关闭该行为（将CSS position的值从 static 更改为 fixed）。
Affix 插件在 3 个样式类之间切换: .affix, .affix-top, 和 .affix-bottom。每个样式类代表一个特定的状态。你必须添加 CSS 属性来处理实际的位置，除了 在 affix 类上的 position:fixed。
学习更多有关知识，请访问本站的 Bootstrap Affix 教程.
提示：Affix 插件通常与其他插件一起使用。
通过 data-* 属性
向要监视的元素添加 data-spy="affix"，并添加 data-offset-top|bottom="number" 属性以计算滚动条的位置。
实例
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
通过 JavaScript
使用手动启用:
实例
$('.nav').affix({offset: {top: 150} });
Affix 选项参数 Options
Options 选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到data-，如 data-offset="" 。
| 名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
| offset | number | object | function | 10 | 指定计算滚动位置时要从屏幕偏移的像素数。使用单个数字时，偏移量将同时添加到顶部和底部方向。如果只想控制顶部或底部，请使用对象，如 offset: {top:25}对于多个 offsets, 使用 offset: {top:25, bottom:50}提示: 使用函数来动态提供偏移（可用于响应式设计） |
| target | selector | node | element | the window object | 指定 affix 的目标元素 |
Affix 事件
下表列出了所有可用的 affix 事件。
| 事件 | 描述 | 试一试 |
|---|---|---|
| affix.bs.affix | 在将 fixed 定位添加到元素之前发生（例如，当 .affix-top 类即将替换为 .affix 类时） | 试一试 |
| affixed.bs.affix | 将 fixed 定位添加到元素后发生（例如，将 .affix-top 类替换为 .affix 类后）) | 试一试 |
| affix-top.bs.affix | 在顶部元素返回其原始（非 fixed）位置之前发生（例如，.affix 类将被 .affix-top 替换） | 试一试 |
| affixed-top.bs.affix | 在顶部元素返回其原始（非 fixed）位置后发生（例如，.affix 类已替换为 .affix-top） | 试一试 |
| affix-bottom.bs.affix | 在底部元素返回其原始（非 fixed）位置之前发生（例如，.affix 类将被 .affix-bottom 替换） | 试一试 |
| affixed-bottom.bs.affix | 在底部元素返回其原始（非 fixed）位置后发生（例如，.affix 类已替换为 .affix-bottom） | 试一试 |
更多实例
附加导航条
创建水平附加导航菜单:
实例
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
使用 jQuery 自动附加导航栏
使用 jQuery 的 outerHeight() 方法在用户滚动通过指定元素（<header>）后附加导航栏:
实例
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}});
滚动监听 & 附加导航
使用 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;}