Bootstrap 附加导航插件 (高级)

附加导航插件

附加导航（Affix）插件允许指定元素固定在页面的某个位置。这通常与导航菜单或社交图标按钮一起使用，使它们锁定在某个位置，不会随着页面其他部分一起滚动。

该插件根据滚动位置来打开和关闭该行为（将CSS position 的值从 static 更改 fixed)。

实例 1) 附加顶部导航栏:

实例 2) 附加侧边导航栏:

使用附加导航插件，当我们上下滚动页面时，菜单始终可见并锁定在固定位置。

如何创建附加导航菜单

以下示例显示了如何创建水平附加导航菜单:

以下示例显示了如何创建垂直附加导航菜单:

实例解析

将 data-spy="affix" 添加到要附加的元素中。

（可选）添加 data-offset-top|bottom 属性以计算滚动的位置。

工作原理

附加插件在三个类之间切换: .affix, .affix-top, 和 .affix-bottom。每个类代表一个特定的状态。您必须添加 CSS 属性来处理实际位置， .affix 类上的 position:fixed 除外。

• 该插件添加 .affix-top 或 .affix-bottom 类，以指示元素处于其最顶端或最底端的位置。此时不需要使用 CSS 进行定位。


• 当滚动经过附加的元素会触发附加-这是插件用 .affix 类 (设置 position:fixed) 替换 .affix-top 或 .affix-bottom 类的地方。此时，必须添加 CSS top 或 bottom 属性，以便在页面中定位附加的元素。


• 如果定义了底部偏移量，滚动过去它会将 .affix 类替换为 .affix-bottom 类。由于偏移量是可选的，因此设置偏移量需要设置适当的CSS。在这种情况下，必要时添加 position:absolute 。

在上面的第一个示例中，当我们从顶部滚动 197 个像素时，Affix 插件将 .affix 类 (position:fixed) 添加到 <nav> 元素中。如果你打开这个例子，你还会看到我们在 .affix 类中添加了 CSS top 属性，它的值为0。 这是为了确保当我们从页面顶部滚动197个像素时，导航栏始终位于页面顶部。

滚动监听 & 附加导航

将附加导航（Affix）插件与 滚动监听（Scrollspy） 插件一起使用:

完整 Bootstrap 附加导航参考

有关附加导航的完整参考，请访问 Bootstrap JS 附加导航参考。