Bootstrap 固定定位插件 (高级)

固定定位插件

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

插件切换此行为的开和关（更改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-top或.affix-bottom类替换为.affix类（设置position:fixed）。此时，您必须添加 CSS 的top或bottom属性，以将固定元素定位在页面上。


• 如果定义了底部偏移量，则滚动到其下方会将.affix类替换为.affix-bottom。由于偏移量是可选的，因此设置一个偏移量需要您设置相应的 CSS。在这种情况下，在需要时添加position:absolute。

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

滚动侦听 & 固定定位

将固定定位插件与滚动侦听插件一起使用

完整 Bootstrap 固定定位参考

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