JS Scrollspy (scrollspy.js)
ปลั๊กอิน Scrollspy จะใช้ในการปรับปรุงการเชื่อมโยงในรายการนำทางบนพื้นฐานของการเลื่อนตำแหน่งโดยอัตโนมัติ
สำหรับการสอนเกี่ยวกับ Scrollspy อ่านของเรา Bootstrap Scrollspy กวดวิชา
เคล็ดลับ: ปลั๊กอิน Scrollspy มักจะใช้ร่วมกับการ ติด ปลั๊กอิน
ผ่าน data-* แอตทริบิวต์
เพิ่ม 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" ทำงานอย่างถูกต้อง
ตัวอย่าง
<!-- 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>
ลองตัวเอง» ผ่านทางจาวาสคริปต์
เปิดใช้งานด้วยตนเอง:
ตัวเลือก Scrollspy
ตัวเลือกที่สามารถส่งผ่านข้อมูลผ่านทางคุณลักษณะหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลผนวกชื่อตัวเลือกในการ DATA- ในขณะที่ข้อมูลชดเชย = ""
| ชื่อ | ชนิด | ค่าเริ่มต้น | ลักษณะ | ลองมัน |
|---|---|---|---|---|
| offset | number | 10 | ระบุจำนวนของพิกเซลเพื่อชดเชยจากด้านบนเมื่อคำนวณตำแหน่งของเลื่อน | ลองมัน |
วิธี Scrollspy
ตารางต่อไปนี้ทุกวิธี scrollspy ใช้ได้
| วิธี | ลักษณะ | ลองมัน |
|---|---|---|
| .scrollspy("refresh") | เมื่อมีการเพิ่มและลบองค์ประกอบจาก scrollspy วิธีนี้สามารถนำมาใช้เพื่อฟื้นฟูเอกสาร | ลองมัน |
เหตุการณ์ Scrollspy
ตารางต่อไปนี้แสดงเหตุการณ์ scrollspy ที่มีอยู่ทั้งหมด
| เหตุการณ์ | ลักษณะ | ลองมัน |
|---|---|---|
| activate.bs.scrollspy | เกิดขึ้นเมื่อรายการใหม่จะเปิดใช้งานโดย scrollspy | ลองมัน |
ตัวอย่าง
Scrollspy กับเลื่อนภาพเคลื่อนไหว
วิธีการเพิ่มการเลื่อนหน้าเรียบสมอในหน้าเดียวกัน:
เลื่อนเรียบ
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar",
offset: 50});
// Add smooth scrolling to all links inside a navbar
$("#myNavbar a").on('click', function(event){
//
Prevent default anchor click behavior
event.preventDefault();
// Store hash (#)
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
//
The optional number (800) specifies the number of milliseconds it takes to scroll to
the specified area (the speed of the animation)
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}); ลองตัวเอง» Scrollspy และติด
ใช้ ติด ปลั๊กอินร่วมกับปลั๊กอิน Scrollspy:
เมนูแนวนอน (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> ลองตัวเอง» เมนูแนวตั้ง (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills
nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body> ลองตัวเอง»