Bootstrap - 滑動偵測：初學者指南

你好，有志於網頁開發的各位！今天，我們將深入探討Bootstrap中一個非常興奮的功能——滑動偵測（Scrollspy）。別擔心你對編程還是新手——我會一步步引導你了解這個主題，就像這些年來我對我的學生做的一樣。所以，來一杯咖啡，我們開始吧！

Bootstrap - Scrollspy

滑動偵測是什麼？

在深入了解技術細節之前，讓我們先了解滑動偵測是什麼。想像你正在線上閱讀一篇很長的文章，當你滑動時，導航菜單會自動高亮你當前正在閱讀的段落。這就是滑動偵測的作用！它是一個小巧的功能，能夠通過提供用戶在內容中的当前位置的視覺反饋來增強用戶體驗。

工作原理

滑動偵測通過監聽你的網頁滾動位置，並相應地更新導航項目的活動狀態。這就像有一個小間諜（因此得名！）在觀察你在頁面上的位置，並告訴你的導航菜單，“嘿，用戶現在在這裡！”

讓我們看一個基本示例：

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
<div id="navbar-example">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link" href="#section1">Section 1</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">Section 2</a></li>
</ul>
</div>

<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">
<h4 id="section1">Section 1</h4>
<p>...</p>
<h4 id="section2">Section 2</h4>
<p>...</p>
</div>
</body>

在這個示例中，我們告訴Bootstrap去偵測滾動位置（data-bs-spy="scroll"）並更新#navbar-example中的導航。當你滑動內容時，對應的導航項目會被高亮。

導航欄

滑動偵測最常見的用途之一是與導航欄（navbar）一起使用。讓我們看一個更詳細的示例：

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">導航欄</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">第一</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">第二</a>
</li>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">第一個標題</h4>
<p>...</p>
<h4 id="scrollspyHeading2">第二個標題</h4>
<p>...</p>
</div>

在這個示例中，我們有一個導航欄和兩個鏈接。當你滑動內容時，對應的導航欄項目會被高亮。這就像為你的網頁裝上了一個GPS！

嵌套導航

有時候，你可能想要有嵌套的導航項目。滑動偵測也可以處理這種情況！這是怎麼做到的：

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">導航欄</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">項目 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">項目 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">項目 1-2</a>
</nav>
<a class="nav-link" href="#item-2">項目 2</a>
</nav>
</nav>

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

這會創建一個嵌套的導航結構，當你滑動不同的節和子節時，它會更新。這就像一本書中的章節和子章節，但是是互動的！

清單組

滑動偵測不僅限於導航欄。你還可以與清單組一起使用：

<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">項目 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">項目 2</a>
</div>

<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="list-item-1">項目 1</h4>
<p>...</p>
<h4 id="list-item-2">項目 2</h4>
<p>...</p>
</div>

這會創建一個清單組，當你滑動內容時，它會更新。這就像有一個知道你在書中的位置的目錄！

簡單鍵接

有時候，你可能想要使用簡單的鍵接而不是完整的導航欄或清單組：

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">導航欄</a>
<ul class="nav">
<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>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
</div>

這會創建簡單的鍵接，當你滑動時，它們會更新。這就像在網頁上有書籤，當你達到它們時會亮起來！

不見的元素

滑動偵測甚至可以與最初不可見的元素一起工作：

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
<a class="navbar-brand" href="#">導航欄</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>
</ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="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>

<script>
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example2'
})
</script>

在這個示例中，即使一些元素最初不可見，滑動偵測在它們進入視野時仍然會工作。這就像有一個間諜能看到牆壁！

使用方法

要使用滑動偵測，你需要做三件事：

在你要偵測的元素上添加data-bs-spy="scroll"（通常是<body>）。
添加data-bs-target="#navId"來指定要使用的導航。
添加data-bs-offset=""來指定計算滾動位置時從頂部偏移的像素。

這裡是一個所有可用數據屬性的表格：

屬性	描述
data-bs-spy	激活滑動偵測
data-bs-target	指定要使用滑動偵測的導航
data-bs-offset	計算滾動位置時從頂部偏移的像素
data-bs-method	找到偵測元素所在的節

選項

你也可以用JavaScript初始化滑動偵測：

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})

這裡是一個所有可用選項的表格：

選項	類型	預設值	描述
offset	number	10	計算滾動位置時從頂部偏移的像素
method	string	'auto'	找到偵測元素所在的節
target	string	''	指定要使用滑動偵測的導航

CSS屬性

滑動偵測使用一些CSS屬性來施展它的魔法：

.scrollspy-example {
position: relative;
height: 200px;
margin-top: .5rem;
overflow: auto;
}

position: relative和overflow: auto屬性對於滑動偵測正確工作至關重要。

這就是使用Bootstrap的滑動偵測功能的知識。記住，熟練來自練習，所以不要害怕嘗試這些示例。祝你編程愉快，願你的滑動總是順暢！

Credits: Image by storyset