Bootstrap 附加导航插件 (高级)


附加导航插件

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

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

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

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

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



如何创建附加导航菜单

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

实例

<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, .affix-top, 和 .affix-bottom。每个类代表一个特定的状态。您必须添加 CSS 属性来处理实际位置, .affix 类上的 position:fixed 除外。

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

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

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

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


滚动监听 & 附加导航

将附加导航(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 附加导航参考

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