Bootstrap JS 附加导航参考


JS Affix (affix.js)

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

该插件根据滚动位置打开和关闭此行为(将 CSS 位置的值从静态更改为固定)。

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

有关更多信息,请阅读我们的 Bootstrap Affix 教程

提示: Affix 插件经常与Scrollspy 插件一起使用。


通过 data-* 属性

data-spy="affix" 添加到要监视的元素,并添加 data-offset-top|bottom="number" 属性来计算滚动的位置。

实例

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
亲自试一试 »

通过 JavaScript

手动启用:

实例

$('.nav').affix({offset: {top: 150} });
亲自试一试 »


Affix 选项

选项可以通过数据属性或 JavaScript 传递。 对于数据属性,将选项名称附加到 data-,如 data-offset="".

名称 类型 默认值 描述
offset number | object | function 10 指定计算滚动位置时从屏幕偏移的像素数。 使用单个数字时,偏移会同时添加到顶部和底部方向。 如果您只想控制顶部或底部,请使用对象,例如 offset: {top:25}

对于多个偏移量,使用 offset: {top:25, bottom:50}

提示: 使用函数动态提供偏移量(对响应式设计很有用)
target selector | node | element the window object 指定 affix 的目标元素

Affix 事件

下表列出了所有可用的 affix 事件。

事件 描述 试一试
affix.bs.affix 在将固定定位添加到元素之前发生(例如,当 .affix-top 类即将被 .affix 类替换时) 测试一下
affixed.bs.affix 在将固定定位添加到元素后发生(例如,在 .affix-top 类替换为 .affix 类之后) 测试一下
affix-top.bs.affix 在顶部元素返回其原始(非固定)位置之前发生(例如 .affix 类即将被 .affix-top替换) 测试一下
affixed-top.bs.affix 在顶部元素返回其原始(非固定)位置后发生(例如 .affix 类已被 .affix-top替换) 测试一下
affix-bottom.bs.affix 在底部元素返回其原始(非固定)位置之前发生(例如 .affix 类即将被 .affix-bottom替换) 测试一下
affixed-bottom.bs.affix 在底部元素返回其原始(非固定)位置后发生(例如 .affix 类已替换为 .affix-bottom 测试一下

更多实例

附加导航栏

创建水平附加导航菜单:

实例

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
亲自试一试 »

使用 jQuery 自动附加导航栏

在用户滚动通过指定元素(<header>)后,使用 jQuery 的 outerHeight() 方法附加导航栏:

实例

$(".navbar").affix({offset: {top: $("header").outerHeight(true)} });
亲自试一试 »

Scrollspy & Affix

将 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>
亲自试一试 »

affix 上的动画导航栏

使用 CSS 来操作不同的 .affix 类:

示例 - 在滚动时更改导航栏的背景颜色和填充

.affix {
  top: 0;
  width: 100%;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  background-color: #F44336;
  border-color: #F44336;
}

.affix a {
  color: #fff !important;
  padding: 15px !important;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.affix-top a {
  padding: 25px !important;
}
亲自试一试 »

示例 - 在导航栏中滑动

.affix {
  top: 0;
  width: 100%;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.affix-top {
  position: static;
  top: -35px;
}
亲自试一试 »