in English

卷轴间谍

根据滚动位置自动更新 Bootstrap 导航或列表组组件，以指示当前在视口中哪个链接处于活动状态。

这个怎么运作

Scrollspy 有一些要求才能正常运行：

  • 如果您从源代码构建我们的 JavaScript，它需要util.js.
  • 它必须用于 Bootstrap导航组件或列表组。
  • Scrollspy 需要position: relative;您正在监视的元素，通常是<body>.
  • 监视 以外的元素时<body>，请务必height设置并overflow-y: scroll;应用。
  • Anchors( <a>) 是必需的，并且必须指向带有它的元素id。

成功实施后，您的导航或列表组将相应更新，根据.active相关目标将类从一项移动到下一项。

导航栏中的示例

滚动导航栏下方的区域并观察活动类的变化。下拉项目也将突出显示。

@胖的

scrollspy 示例的占位符内容。你得到了最好的建筑。护照印章，她是国际化的。很好，新鲜，凶猛，我们锁定了它。从来没有想过有一天我会失去你。她吃掉你的心。你的吻是宇宙的，一举一动都是神奇的。我的意思是那些，我的意思是她就是那个。问候亲人，让我们一起旅行。只拥有像 7 月 4 日这样的夜晚！但你宁愿浪费。

@mdo

scrollspy 示例的占位符内容。因为她是缪斯和艺术家。（我们就是这样做的） 所以你想玩魔法。所以，在你把它全部给我之前，一定要确定。我在走路，我在空中行走（今晚）。跳过谈话，听到这一切，是时候走路了。

一

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

scrollspy 示例的占位符内容。如果你想跳舞，如果你想要这一切，你知道我是你应该打电话的女孩。走过我会的风暴。所以让我给你穿上你的生日套装。逃走了的那一个。上周五晚上，是的，我认为我们触犯了法律，总是说我们会停止。因为她有点像洋子，而且她有点像“哦，不”。我想要下巴掉下来，眼睛弹出，头转动，身体震惊。是的，我们刷爆了信用卡，然后被赶出了酒吧。

还有一些更多的占位符内容，很好的衡量标准。

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

嵌套导航示例

Scrollspy 也适用于嵌套.nav的 s。如果一个嵌套.nav是.active，它的父母也将是.active。滚动导航栏旁边的区域并观察活动类的变化。

项目 1

scrollspy 示例的占位符内容。这一项与第 1 项有关。带你几英里高，如此之高，因为她有那种国际化的微笑。我的床上有一个陌生人，我的脑袋嗡嗡作响。不好了。在另一种生活中，我会让你留下来。因为我，我什么都能做。适合我的加冕之战。曾经偷过你父母的酒，爬上屋顶。色调，棕褐色适合并准备好，将其调高，因为它开始变得沉重。她的爱就像毒药。我想我忘了我有选择。

项目 1-1

scrollspy 示例的占位符内容。这一项与 1-1 项有关。你得到了最好的建筑。护照印章，她是国际化的。很好，新鲜，凶猛，我们锁定了它。从来没有想过有一天我会失去你。她吃掉你的心。你的吻是宇宙的，一举一动都是神奇的。我的意思是那些，我的意思是她就是那个。问候亲人，让我们一起旅行。只拥有像 7 月 4 日这样的夜晚！但你宁愿浪费。

项目 1-2

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

scrollspy 示例的占位符内容。这一项与第 3-2 项有关。你是原创的，无法替代。他们整晚都在演奏，你的歌。加州女孩我们是不可否认的。就像一只没有笼子的鸟。现在没有恐惧，放手，自由，我会无条件地爱你。我可以看到墙上的文字。你可以环游世界，但没有什么比黄金海岸更近了。

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

列表组示例

Scrollspy 也适用于.list-groups。滚动列表组旁边的区域并观察活动班级的变化。

项目 1

scrollspy 列表组示例的占位符内容。这一项与第 1 项有关。不需要道歉。现在没有恐惧，放手，自由，我会无条件地爱你。上周五晚上。不要害羞，我敢打赌它很漂亮。高中毕业后的夏天，我们第一次见面。因为她是缪斯和艺术家。什么？等待。以为我是个例外。

第 2 项

scrollspy 列表组示例的占位符内容。这一项与第 2 项有关。是的，她按照自己的节奏跳舞。不好了。你本可以是最伟大的。因为，宝贝，你是一朵烟花。也许是所有门都关闭的原因。打开你的心，让它开始吧。如此时尚，是的，她是经典之作。

第 3 项

scrollspy 列表组示例的占位符内容。这一项与第 3 项有关。我们越来越高。从来没有一个没有另一个，我们达成了一项协议。我在空中行走。有人说你的纹身被移除了。现在我像蝴蝶一样漂浮。色调，棕褐色适合并准备好，将其调高，因为它开始变得沉重。因为一旦你是我的，一旦你是我的。你只需要点燃光，让它发光！于是我们来到了林荫大道。你有没有觉得，觉得纸这么薄。我看到了这一切，我现在看到了。

第 4 项

scrollspy 列表组示例的占位符内容。这与第4项有关。高中毕业后的夏天，我们第一次见面。现在没有恐惧，放手，自由，我会无条件地爱你。阳光亲吻过的皮肤太热了，我们会融化你的冰棒。这种爱会让你漂浮。

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

用法

通过数据属性

要轻松地将 scrollspy 行为添加到您的顶栏导航，请添加data-spy="scroll"到您要监视的元素（通常是<body>）。然后添加带有任何 Bootstrap组件data-target的父元素的 ID 或类的属性。.nav

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

添加position: relative;CSS 后，通过 JavaScript 调用 scrollspy：

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

需要可解析的 ID 目标

导航栏链接必须具有可解析的 id 目标。例如，a<a href="#home">home</a>必须对应 DOM 中的某些内容，例如<div id="home"></div>.

非:visible目标元素被忽略

:visible不符合 jQuery的目标元素将被忽略，并且它们相应的导航项将永远不会突出显示。

方法

.scrollspy('refresh')

当使用 scrollspy 和从 DOM 中添加或删除元素时，你需要像这样调用 refresh 方法：

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

.scrollspy('dispose')

销毁元素的滚动间谍。

选项

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

姓名 类型 默认 描述
抵消 数字 10 计算滚动位置时从顶部偏移的像素。
方法 细绳 汽车 查找被监视的元素在哪个部分。auto将选择获取滚动坐标的最佳方法。offset将使用 jQuery 偏移方法来获取滚动坐标。position将使用 jQuery 位置方法来获取滚动坐标。
目标 字符串 | jQuery 对象 | DOM 元素 指定要应用 Scrollspy 插件的元素。

活动

事件类型 描述
激活.bs.scrollspy 每当滚动间谍激活新项目时，此事件就会在滚动元素上触发。 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})