?
This document uses PHP Chinese website manual Release
根據(jù)滾動位置自動更新引導(dǎo)導(dǎo)航或列表組組件，以指示當(dāng)前視圖端口中哪個鏈接處于活動狀態(tài)。
它是如何工作的
滾動間諜有幾個要求才能正常工作：
如果從源頭構(gòu)建我們的JS，要求
util.js...
它必須用在一個引導(dǎo)帶上NAV組分或列表組...
卷軸間諜需要
position: relative;在你監(jiān)視的元素上，通常<body>...
當(dāng)監(jiān)視其他元素時
<body>，一定要有一個height設(shè)置和overflow-y: scroll;申請。
錨定物%28
<a>%29是必需的，必須指向具有id...
成功實現(xiàn)后，您的導(dǎo)航或列表組將相應(yīng)更新，移動.active根據(jù)它們關(guān)聯(lián)的目標從一個項初始化到另一個項。
肚臍中的例子
滾動導(dǎo)航欄下面的區(qū)域，并觀察活動類的變化。下拉式項目也將突出顯示。
<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>
嵌套NAV示例
渦旋間諜也適用于嵌套的.nav如果嵌套.nav是.active，它的父母也會.active滾動導(dǎo)航欄旁邊的區(qū)域，并觀察活動類的變化。
<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">Item2</a> <a class="nav-link" href="#item-3">Item3</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 2-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滾動列表組旁邊的區(qū)域，并觀察活動類的更改。
<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">Item2</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>
使用
通過數(shù)據(jù)屬性
若要輕松地將滾動間諜行為添加到頂部導(dǎo)航中，請?zhí)砑?code>data-spy="scroll"對于要監(jiān)視%28的元素，最典型的情況是<body>29%。然后添加data-target屬性，該屬性具有任何Bootstrap的父元素的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調(diào)用滾動間諜：
$('body').scrollspy({ target: '#navbar-example' })所需可解析ID目標
Navbar鏈接必須有可分辨的id目標。例如，<a href="#home">home</a>必須對應(yīng)于DOM中的某些內(nèi)容，如<div id="home"></div>...
非-:visible忽略目標元素
不是的目標元素:visible根據(jù)jQuery將被忽略，其相應(yīng)的導(dǎo)航項將永遠不會突出顯示。
方法
.scrollspy('refresh')
當(dāng)結(jié)合使用滾動間諜從DOM中添加或刪除元素時，您需要調(diào)用以下刷新方法：
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')}).scrollspy('dispose')
破壞元素的滾動間諜。
備選方案
選項可以通過數(shù)據(jù)屬性或JavaScript傳遞。對于數(shù)據(jù)屬性，將選項名追加到data-，如data-offset=""...
Name | Type | Default | Description |
|---|---|---|---|
offset | number | 10 | Pixels to offset from top when calculating position of scroll. |
事件
Event Type | Description |
|---|---|
activate.bs.scrollspy | This event fires on the scroll element whenever a new item becomes activated by the scrollspy. |
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () { // do something…})? 2011–2017 Twitter, Inc.
?2011-2017自帶作者
根據(jù)麻省理工學(xué)院的許可授權(quán)的代碼。
根據(jù)CreativeCommonsAttributionLicense v3.0授權(quán)的文檔。