Skip to main content

组件

十几种可以重复使用的组件,包括按钮、下拉菜单、输入组、导航、提示框等。

--本章内容翻译由:樊潇洁友情提供

滚动监听

内容

导航条示例

滚动监听插件会根据滚动的位置,自动更新导航条的目标。滚动在导航条下面的区域,查看active类的改变。弹出菜单的子项也同样会被高亮。

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

用法

需要Bootstrap导航条

Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.

滚动监听现在需要用到Bootstrap nav 组件 以适当地高亮激活的链接。

需要相对位置

无论如何应用这个方法,滚动监听需要在你要监听的元素上用position:relative;。在多数情况下,这个需要监听的元素就是<body>。当在除了<body>之外的元素上进行滚动监听时,请确保应用了一个height设置以及overflow-y:scroll;

利用data属性

要想方便地在你的顶部导航条上添加滚动监听,请在你想监听的元素上添加data-spy="scroll"(最典型的就是<body>)。然后添加data-target属性,属性值是任何Bootstrap.nav组件的父元素的ID或类。

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

利用JavaScript

在你的CSS中添加了position: relative;之后,利用JavaScript调用滚动监听:

$('body').scrollspy({ target: '#navbar-example' })

需要可解析的ID目标

导航条链接必须拥有可解析的ID目标。举个例子,一个<a href="#home">home</a>链接必须有与其对应的DOM元素,比如说<div id="home"></div>

不可见的目标元素会被忽略

不可见的目标元素:visible according to jQuery会被忽略,而且它们相应的导航项就远不会被高亮。

方法

.scrollspy(‘refresh’)

在使用滚动监听的同时,如果在DOM中添加或移除了元素,你需要调用刷新方法,如下所示:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

选项

可以利用data属性或者JavaScript传递选项。如果用data属性,请把选项名追加到data-后面,比如说写成data-offset=""

名称 类型 默认值 description
offset number 10 从顶部滚下来多少像素开始计算位置

事件

事件类型 描述
activate.bs.scrollspy 当一个新项被滚动监听激活时,会触发该事件。
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})