Bootstrap 4 Scrollspy (ขั้นสูง)
Bootstrap 4 Scrollspy
Scrollspy ใช้เพื่ออัปเดตลิงก์ในรายการการนำทางโดยอัตโนมัติตามตำแหน่ง การ เลื่อน
วิธีการสร้าง Scrollspy
ตัวอย่างต่อไปนี้แสดงวิธีสร้าง scrollspy:
ตัวอย่าง
<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-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>
ตัวอย่างที่อธิบาย
เพิ่มdata-spy="scroll"ไปยังองค์ประกอบที่ควรใช้เป็นพื้นที่ที่เลื่อนได้ (มักจะเป็น<body>องค์ประกอบ)
จากนั้นเพิ่มdata-targetแอตทริบิวต์ที่มีค่าของ id หรือชื่อคลาสของแถบนำทาง ( .navbar) เพื่อให้แน่ใจว่าแถบนำทางเชื่อมต่อกับพื้นที่ที่เลื่อนได้
โปรดทราบว่าองค์ประกอบที่เลื่อนได้ต้องตรงกับ ID ของลิงก์ภายในรายการของแถบนำทาง ( <div id="section1">match <a href="#section1">)
แอตทริบิวต์ที่ เป็นตัวเลือกdata-offsetระบุจำนวนพิกเซลที่จะออฟเซ็ตจากด้านบนเมื่อคำนวณตำแหน่งของการเลื่อน สิ่งนี้มีประโยชน์เมื่อคุณรู้สึกว่าลิงก์ภายในแถบนำทางเปลี่ยนสถานะใช้งานเร็วเกินไปหรือเร็วเกินไปเมื่อข้ามไปยังองค์ประกอบที่เลื่อนได้ ค่าเริ่มต้นคือ 10 พิกเซล
ต้องการตำแหน่งสัมพันธ์:องค์ประกอบที่มี data-spy="scroll" ต้องการ คุณสมบัติ ตำแหน่ง CSS โดยมีค่า "สัมพันธ์" เพื่อให้ทำงานได้อย่างถูกต้อง
เมนูแนวตั้ง Scrollspy
ในตัวอย่างนี้ เราใช้ยานำทางแนวตั้งของ Bootstrap เป็นเมนู:
ตัวอย่าง
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3
col-4" id="myScrollspy">
<ul class="nav nav-pills
flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
...
</ul>
</nav>
<div class="col-sm-9
col-8">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the
menu while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
ทำการอ้างอิง Bootstrap Scrollspy ให้สมบูรณ์
สำหรับการอ้างอิงที่สมบูรณ์ของตัวเลือก scrollspy เมธอดและเหตุการณ์ทั้งหมด ไปที่ Bootstrap JS Scrollspy Referenceของเรา