Source

捲軸間諜

根據滾動位置自動更新 Bootstrap 導航或列表組組件，以指示當前在視口中哪個鏈接處於活動狀態。

這個怎麼運作

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

  • 如果您從源代碼構建我們的 JavaScript，它需要util.js.
  • 它必須用於 Bootstrap導航組件或列表組。
  • Scrollspy 需要position: relative;您正在監視的元素，通常是<body>.
  • 在監視 以外的元素時<body>，請務必height設置並overflow-y: scroll;應用。
  • Anchors( <a>) 是必需的，並且必須指向帶有它的元素id。

成功實施後，您的導航或列表組將相應更新，根據.active相關目標將類從一項移動到下一項。

導航欄中的示例

滾動導航欄下方的區域並觀察活動類的變化。下拉項目也將突出顯示。

@胖的

廣告緊身褲 keytar，早午餐 id 藝術派對 dolor labe。Pitchfork yr enim lo-fi 在售罄之前 qui。Tumblr 從農場到餐桌的自行車權利。Anim keffiyeh carles 開衫。Velit seitan mcsweeney 的照相亭 3 wolf moon irure。Cosby 毛衣 lomo jean 短褲，williamsburg 連帽衫 minim qui 你可能沒聽說過它們和開衫信託基金過失生物柴油韋斯安德森美學。Nihil 紋身 accusamus，具有諷刺意味的生物柴油 keffiyeh 工匠 ullamco 後果。

@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 博客，過錯郵差包 marfa 不管是什麼美味的食品卡車。Sapiente 合成器 id 假設。Locavore sed helvetica 陳詞濫調具有諷刺意味，您可能沒有聽說過它們導致連帽衫無麩質 lo-fi fap aliquip。在售罄之前，Labore 就出現了，terry Richardson 早午餐 nesciunt quis cosby 毛衣 pariatur keffiyeh ut helvetica artisan。開衫精釀啤酒 seitan 現成的 velit。VHS chambray labouris tempor veniam。Anim mollit minim commodo ullamco 雷貓。

<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-haspopup="true" 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

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore。Fugiat laborum incididunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。

項目 1-1

Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et。Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt。Aliqua cillum excepteur irure consequat id quis ea。坐高貴的 ullamco aute magna pariatur nostrud 勞動。Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis。Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing。Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat。

項目 1-2

Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 3-1

Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.

Item 3-2

Labore 坐 culpa commodo elit adipisicing 坐 aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do。Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt。Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia。Aliquip consequat ad laboure mollit ut amet。坐在 veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia 的 pariatur tempor proident。

<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

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore。Fugiat laborum incididunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。

第 2 項

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor。Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua。Esse ex consectetur mollit voluptate est in duis laboris ad sat ipsum anim Lorem。Inciddunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sat enim elit aliqua esse irure。Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo。Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident。

第 3 項

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis。Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit。Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur。

第 4 項

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis。Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit。Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur。

<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 位置方法來獲取滾動坐標。
目標 細繩 指定要應用 Scrollspy 插件的元素。

活動

事件類型 描述
激活.bs.scrollspy 每當滾動間諜激活新項目時，此事件就會在滾動元素上觸發。 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})