Bootstrap Affix 插件 (高级)

Affix 插件

Affix 插件允许一个元素固定（锁定）在页面上的某个区域。这通常用于导航菜单或社交图标按钮，使其在页面上下滚动时“粘”在特定区域。

插件根据滚动位置切换此行为的开启和关闭（更改 CSS position 的值，从 static 到 fixed）。

示例 1) 固定导航栏

示例 2) 固定侧边栏

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

如何创建固定的导航菜单

以下示例展示了如何创建水平固定的导航菜单

以下示例展示了如何创建垂直固定的导航菜单

示例解释

将 data-spy="affix" 添加到您要固定的元素上。

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

工作原理

Affix 插件在三个类之间切换：.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-bottom 替换 .affix 类。由于偏移是可选的，设置一个偏移需要您设置相应的 CSS。在这种情况下，如果需要，添加 position:absolute。

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

滚动监听和固钉

将 Affix 插件与 Scrollspy 插件结合使用

完整的 Bootstrap Affix 参考

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