Bootstrap Affix 插件（高级）

词缀插件

Affix 插件允许将元素附加（锁定）到页面上的某个区域。这通常与导航菜单或社交图标按钮一起使用，以便在上下滚动页面时使它们在特定区域"stick"。

插件切换这种行为打开和关闭（改变值CSS position从static到fixed），取决于滚动位置。

示例1)固定导航栏：

示例2)固定侧边栏：

使用 Affix，当我们上下滚动页面时，菜单始终可见并锁定在其位置。

如何创建固定导航菜单

以下示例显示如何创建水平固定导航菜单：

以下示例显示如何创建垂直固定导航菜单：

示例解释

添加data-spy="affix"到您想要附加的元素。

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

怎么运行的

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

• 该插件添加了.affix-top或者.affix-bottomclass 来指示元素位于最顶部或最底部位置。此时不需要使用 CSS 进行定位。


• 滚动经过附加元素会触发实际的附加 - 这是插件替换.affix-top或者.affix-bottom类与.affix类（套position:fixed）。此时，您必须添加 CSStop或者bottom属性来在页面中定位附加元素。


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

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

滚动监视和粘贴

将 Affix 插件与滚动间谍插入：

完整的 Bootstrap 词缀参考

有关所有附加方法和事件的完整参考，请访问我们的Bootstrap JS 词缀参考。