Bootstrap 5 Scrollspy

Scrollspy

Scrollspy ใช้ตามเลื่อนตำแหน่งอัตโนมัติปรับปรุงรายการลิงก์ในรายการนำทาง。

วิธีการสร้าง Scrollspy

ตัวอย่างด้านล่างแสดงว่ามีทางที่จะสร้าง Scrollspy:

ตัวอย่าง

<!-- ส่วนที่สามารถเลื่อนได้ -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- แถวประวัติ - อิเล็ม <a> ใช้เพื่อกระโดดไปยังส่วนใดๆ ของส่วนที่สามารถเลื่อนได้ -->
<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>โปรดพยายามเลื่อนหน้านี้และดูแถวประวัติขณะที่เลื่อน!</p>
</div>
...
</body>

ทดลองด้วยตัวเอง

ตัวอย่างเล่าเรื่อง

กำหนด data-bs-spy="scroll" เพิ่มเข้าไปในส่วนที่ใช้เป็นส่วนที่สามารถเลื่อนได้ (ส่วนใด้ว่าเป็นตัวอย่างนี้) <body> ส่วน (

เพิ่ม data-bs-target คุณสมบัติ ที่มีค่าเป็น id หรือชื่อรูปแบบของแถวประวัติ (.navbar) มีเหตุจากความต้องการให้แถวประวัติและส่วนที่สามารถเลื่อนได้มีความเชื่อมโยงกัน

โปรดระวังว่าส่วนที่สามารถเลื่อนได้ต้องมี ID ที่ตรงกันข้ามกับลิงก์ในรายการเมนูแถวประวัติ (<div id="section1"> ตรงกันข้าม <a href="#section1">)

ทางเลือก data-bs-offset คุณสมบัติที่กำหนดจำนวนพิกเซตี่งด้วยจุดที่มีความเปลี่ยนแปลงตัวตนจากด้านบนในขณะที่คำนวณตำแหน่งของการเลื่อนเวลา มีประโยชน์มากเมื่อการเปลี่ยนสถานะการเปิดใจที่มีการกระทำจากลิงก์ในแถวประวัติที่ข้างบนเมื่อเปิดบรรทัดที่สามารถเลื่อนได้ ค่าเริ่มต้นคือ 10 พิกเซต

ต้องมีการติดตั้งตำแหน่งเป็นอัตราส่วน：อนุญาติให้ส่วนที่มี data-bs-spy="scroll" ต้องมี CSS ตำแหน่ง ค่าของคุณสมบัติต้องเป็น "relative" ให้ทำงานได้ทั้งหมด