Scrollspy ใช้เพื่ออัปเดตลิงก์ในรายการนำทางโดยอัตโนมัติตามตำแหน่ง เลื่อน
ตัวอย่างต่อไปนี้แสดงวิธีการสร้าง scrollspy:
<!-- The scrollable area -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</body>ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container-fluid">
<ul class="navbar-nav">
<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>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</div>
</nav>
<div id="section1" class="container-fluid bg-success text-white" style="padding:100px 20px;">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding:100px 20px;">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary text-white" style="padding:100px 20px;">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>
เพิ่ม data-bs-spy="scroll" ให้กับองค์ประกอบที่ควรใช้เป็นพื้นที่เลื่อนได้ (มักจะเป็น <body> องค์ประกอบ)
จากนั้นเพิ่มแอตทริบิวต์ data-bs-target ด้วยค่าของ id หรือชื่อคลาสของแถบนำทาง (.navbar ) เพื่อให้แน่ใจว่าแถบนำทางเชื่อมต่อกับพื้นที่ที่สามารถเลื่อนได้
โปรดทราบว่าองค์ประกอบที่เลื่อนได้จะต้องตรงกับ ID ของลิงก์ภายในรายการของ navbar (<div id="section1"> ตรงกับ <a href="#section1">)
ตัวเลือกแอตทริบิวต์ data-bs-offset ระบุจำนวนพิกเซลที่จะชดเชยจากด้านบนเมื่อคำนวณตำแหน่งของการเลื่อน สิ่งนี้มีประโยชน์เมื่อคุณรู้สึกว่าลิงก์ภายในแถบนำทางเปลี่ยนสถานะการใช้งานเร็วเกินไปหรือเร็วเกินไปเมื่อข้ามไปยังองค์ประกอบที่เลื่อนได้ ค่าเริ่มต้นคือ 10 พิกเซล
ต้องมีการวางตำแหน่งแบบสัมพัทธ์: องค์ประกอบที่มี data-bs-spy="scroll" ต้องใช้คุณสมบัติ ตำแหน่ง ของ CSS ที่มีค่าเป็น "relative" เพื่อให้ทำงานได้อย่างถูกต้อง