Bootstrap 附加导航（Affix ）插件
Affix 插件
Affix 插件可以将元素附加（锁定）到页面上的某个区域。这通常与导航菜单或社交图标按钮一起使用，使它们在页面上下滚动时 "粘" 在特定区域。
该插件会根据滚动位置来打开和关闭该行为（将 CSS position 的值从 static 更改为 fixed）。
实例 1) 一个附加导航栏:
实例 2) 一个附加侧边栏:
使用 Affix，当我们上下滚动页面时，菜单始终可见并锁定在其位置。
如何创建一个附加导航目录
下面的实例演示如何创建水平导航菜单:
实例
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
下面的示例演示如何创建垂直附加导航菜单:
实例
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
实例解释
将 data-spy="affix" 添加到您想附加的元素上。
可选择添加 data-offset-top|bottom 属性以计算滚动的位置。
工作原理
affix 插件在 3 个类之间切换: .affix, .affix-top, 和 .affix-bottom. 每个类代表一个特定的状态。
您必须添加 CSS 属性来处理实际的位置，除了在 .affix 上使用 position:fixed。
该插件添加了
.affix-top或.affix-bottom类，以指示元素处于其最顶部或最底部的位置。此时不需要使用 CSS 进行定位。当滚动经过附加的元素时就会触发实际的附加动作 - 这是插件用
.affix类替换.affix-top或.affix-bottom类的地方（设置 position: fixed）。此时，您必须添加 CSS top 或 bottom 属性，以便在页面中定位附加的元素。如果定义了底部偏移量，滚动到其上方会将
.affix类替换为.affix-bottom。由于偏移量是可选的，因此设置偏移量需要设置适当的 CSS。在这种情况下，必要时添加position:absolute。
在上面的第一个实例中，当我们从顶部滚动 197 个像素时，Affix 插件将 .affix 类（position: fixed）添加到 <nav> 元素中。如果你打开这个例子，你也会看到我们将 CSS top 属性的值添加到了 .affix 类中。这是为了确保当我们从页面顶部滚动 197 个像素时，导航栏始终固定于页面顶部。
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>
完整的 Bootstrap Affix 参考
有关所有 Affix 方法和事件的完整参考，请访问本站的 Bootstrap JS Affix 参考。