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...
})