在 GitHub 上查看

滾動監聽

根據捲動位置自動更新 Bootstrap 導覽或清單群組元件，以指示目前在視口中活動的連結。

運作方式

滾動監聽需要一些條件才能正常運作

  • 如果您從源代碼構建我們的 JavaScript，需要 util.js。
  • 它必須用於 Bootstrap 導航元件 或 清單群組。
  • 滾動監控（Scrollspy）需要在你要監控的元素上（通常是 <body>）設置 position: relative;。
  • 當監控的元素不是 <body> 時，請確保設置了 height 並應用了 overflow-y: scroll;。
  • 錨點（<a>）是必須的，並且必須指向具有相應 id 的元素。

成功實現後，你的導航或列表組將相應地更新，根據它們的關聯目標將 .active 類從一個項目移動到下一個項目。

導覽列範例

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

@fat

滾動監控示例的占位內容。你擁有最優秀的架構。護照上的印記，她是世界性的。優雅、新鮮、兇猛，我們掌握了。從未想過有一天我會失去你。她吞噬你的心。你的吻是宇宙的，每一個動作都是魔術。我的意思是那些，我的意思是像她一樣的人。親愛的朋友，讓我們踏上旅程。就像七月四日一樣獨享這夜晚！但你更願意喝醉。

@mdo

滾動監控示例的占位內容。因為她是靈感和藝術家。 （這就是我們的做法）所以你想和魔法玩耍。所以在你將一切都給我之前，一定要確定。我在行走，我在空中行走（今晚）。省略談話，聽過了一切，是時候走上行動。

one

滾動監控示例的占位內容。帶你飛得更高，如此之高，因為她有那種國際笑容。我的床上有個陌生人，我的頭腦里有個跳動聲。哦，不。在另一個生活中，我會讓你留下來。因為我，我什麼都做得到。為我的加冕戰作好準備。曾經偷你父母的酒，爬到屋頂。調整、曬黑、健身，準備好了，把它打開，因為它變得沉重了。她的愛像一種毒品。我想我忘記了我有選擇。

two

滾動監控示例的占位內容。是時候拿出大氣球了。我在行走，我在空中行走（今晚）。是的，我們刷爆了信用卡，被趕出了酒吧。嘿，向那些用房租錢買酒水服務的孩子們大喊。我會穿上緊身牛仔褲讓你的心跳加速。如果你有機會，你最好留住她。嘿，向那些用房租錢買酒水服務的孩子們大喊。

three

滾動監控示例的占位內容。如果你想跳舞，如果你想擁有一切，你知道應該找我。穿越暴風雨我會的。所以讓我讓你穿上生日裝。那個失去的人。上個星期五晚，是的，我想我們犯了法，總是說我們會停下來。因為她有一點像小妮子，她又有一點像“哦，不”。我想要的是讓人驚嘆、讓人眼睛一亮、讓人轉頭、讓人震驚的。是的，我們刷爆了信用卡，被趕出了酒吧。

還有一些占位內容，以確保。

<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>

巢狀導覽範例

滾動監視器也與巢狀的 .nav 一起使用。如果巢狀的 .nav 是 .active，其父元素也將是 .active。滾動導航欄旁的區域，觀察活動類別的變化。

項目 1

滾動監視器示例的佔位內容。這個與項目 1 相關。把你帶到遙遠的地方，如此高，因為她有那個國際性的微笑。我的床上有一個陌生人，我的頭腦里有一個敲打聲。哦，不。在另一個生活中，我會讓你留下來。因為我，我能做任何事情。為我的加冕戰做好準備。曾經偷你父母的酒，爬到屋頂。調整，曬黑，準備好，把它打開，因為它變得沉重。她的愛就像一種毒品。我想我忘了我有選擇。

項目 1-1

滾動監視器示例的佔位內容。這個與項目 1-1 相關。你擁有最精美的建築。護照上的郵戳，她是世界性的。優雅，新鮮，強勁，我們鎖定了它。從來沒有計劃過有一天我會失去你。她吃掉你的心。你的吻是宇宙的，每一個動作都是魔術。我的意思是那些，我的意思就像她就是那個。問候親愛的，讓我們一起踏上旅程。就像 7 月 4 日一樣，只需擁有這個夜晚！但你寧願喝醉。

項目 1-2

滾動監視器示例的佔位內容。這個與項目 1-2 相關。她的愛就像一種毒品。我所有的女孩都是復古的香奈兒寶貝。在汽車旅館裡搭建了一個床單堡壘。因為她是靈感和藝術家。(這就是我們的做法)所以你想和魔術一起玩。所以在你把一切都給我之前，一定要確定。我在走路，我在空中行走（今晚）。跳過談話，聽過一切，是時候付諸行動了。如果你能抓住她就抓住她。像蜜蜂一樣刺痛我賺取了我的榮譽。

項目 2

滾動監視器示例的佔位內容。這個與項目 2 相關。不需要道歉。現在已經沒有恐懼，放手，只是自由，我會無條件地愛你。上週五晚上。不要害羞，我敢打賭它很美。高中畢業後的夏天，當我們第一次見面。因為她是靈感和藝術家。什麼？等等。不，不，不，不。以為我是例外。

項目 3

滾動監視器示例的佔位內容。這個與項目 3 相關。街上傳出了消息，你有什麼東西要給我看，我。所有的錢都買不到一台時光機。讓每天都像你的生日一樣。所以我們走上了大道。你讓我感覺我像是在過著少年夢，你讓我興奮。跳過談話，聽過一切，是時候付諸行動了。街上傳出了消息，你有什麼東西要給我看，我。這不是什麼大不了的事，這不

項目 3-1

滾動間諜範例的佔位內容。這個與項目 3-1 相關。寶貝，你敢這樣做嗎？這沒什麼大不了。是的，如果你在她的飛機上，你很幸運。就像是獨立日的夜晚一樣！當炸彈開始落下時站在前線。所以，在你把一切都給我之前，請確定好。

項目 3-2

滾動間諜範例的佔位內容。這個與項目 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>

清單群組範例

滾動間諜也可以與 .list-group 一起使用。滾動列表組旁邊的區域並觀察活動類別的變化。

項目 1

滾動間諜列表組範例的佔位內容。這個與項目 1 相關。不需要道歉。現在沒有恐懼，放手並且自由，我會無條件地愛你。上週五晚。不要害羞，我打賭它會很美麗。高中畢業後的夏天，我們第一次相遇。因為她是靈感和藝術家。什麼？等等。以為我是例外。

項目 2

滾動間諜列表組範例的佔位內容。這個與項目 2 相關。是的，她跳著自己的節奏。哦，不。你本來可以成為最偉大的。因為，寶貝，你就像煙火一樣。也許所有的門都關上了的原因。敞開你的心，讓它開始吧。如此時尚，是的，她是一個經典。

項目 3

滾動間諜列表組範例的佔位內容。這個與項目 3 相關。我們越來越高。永遠不會有一個人離開另一個人，我們達成了一個協議。我在空中行走。有人說你刺青被去除了。現在我像蝴蝶一樣飄浮。音調，棕色健康且準備好，調高它因為它變得沉重。因為一旦你是我的，一旦你是我的。你只需要點燃光芒，讓它發光！所以我們走上了大道。你曾經有過這種感覺嗎，感覺如此薄如紙？我看到了一切，我現在看到了。

項目 4

滾動偵測清單示例的占位內容。這個與項目 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>

使用方法

透過資料屬性

要將滾動偵測行為輕鬆添加到您的頂部導覽中，請將 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目標元素

將忽略不符合 jQuery 可見選擇器的目標元素，它們對應的導航項目將永遠不會被突顯。

方法

.scrollspy('refresh')

當使用滾動偵測與從 DOM 添加或刪除元素時，您需要這樣調用刷新方法

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

.scrollspy('dispose')

銷毀元素的滾動偵測。

選項

選項可以通過數據屬性或 JavaScript 進行傳遞。對於數據屬性，將選項名稱附加到 data-，如 data-offset=""。

名稱 類型 默認值 描述
offset 數字 10 在計算滾動位置時距離頂部的像素。
method 字符串 auto 查找受監測元素所在的部分。auto 將選擇獲取滾動坐標的最佳方法。offset 將使用 jQuery 的 offset 方法獲取滾動坐標。position 將使用 jQuery 的 position 方法獲取滾動坐標。
target 字符串 | jQuery 對象 | DOM 元素 指定要應用 Scrollspy 插件的元素。

事件

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