ปลั๊กอิน Scrollspy
ปลั๊กอิน Scrollspy จะใช้ในการปรับปรุงการเชื่อมโยงในรายการนำทางบนพื้นฐานของการเลื่อนตำแหน่งโดยอัตโนมัติ
วิธีการสร้าง Scrollspy
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการสร้าง scrollspy A:
ตัวอย่าง
<!-- 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-inverse navbar-fixed-top">
...
<ul class="nav
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 ) นี้คือการทำให้แน่ใจว่า Navbar มีการเชื่อมต่อกับพื้นที่เลื่อน
โปรดทราบว่าองค์ประกอบเลื่อนต้องตรงกับรหัสของการเชื่อมโยงภายในรายการ Navbar ฯ ( <div id="section1"> ตรง <a href="#section1"> )
ตัวเลือก data-offset แอตทริบิวต์ระบุจำนวนของพิกเซลเพื่อชดเชยจากด้านบนเมื่อคำนวณตำแหน่งของเลื่อน นี้จะเป็นประโยชน์เมื่อคุณรู้สึกว่าการเชื่อมโยงภายใน Navbar การเปลี่ยนแปลงสภาพที่ใช้งานเร็วเกินไปหรือเร็วเกินไปเมื่อกระโดดองค์ประกอบเลื่อน เริ่มต้นคือ 10 พิกเซล
ต้องมีการวางตำแหน่งสัมพัทธ์: องค์ประกอบด้วย data-spy="scroll" ต้องใช้ CSS position ทรัพย์สินที่มีค่าของ "relative" ทำงานอย่างถูกต้อง
เมนู Scrollspy แนวตั้ง
ในตัวอย่างนี้เราจะใช้เงินทุนของยาลูกศรแนวตั้งเป็นเมนู:
ตัวอย่าง
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div
class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to
scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body> ลองตัวเอง» กรอก Bootstrap Scrollspy อ้างอิง
สำหรับการอ้างอิงที่สมบูรณ์แบบของวิธีการ scrollspy และกิจกรรมทั้งหมดไปที่เรา Bootstrap JS Scrollspy อ้างอิง