Bootstrap JS Scrollspy
JS Scrollspy (scrollspy.js)
Plugin Scrollspy digunakan untuk memperbarui tautan secara otomatis dalam daftar navigasi berdasarkan posisi gulir.
Untuk tutorial tentang Scrollspy, baca Tutorial Bootstrap Scrollspy kami .
Tip: Plugin Scrollspy sering digunakan bersama dengan plugin Affix .
Melalui data-* Atribut
Tambahkan data-spy="scroll"ke elemen yang harus digunakan sebagai area yang dapat digulir (seringkali ini adalah <body>elemennya).
Kemudian tambahkan data-targetatribut dengan nilai id atau nama kelas bilah navigasi ( .navbar). Ini untuk memastikan bahwa navbar terhubung dengan area yang dapat digulir.
Perhatikan bahwa elemen yang dapat digulir harus cocok dengan ID tautan di dalam item daftar bilah navigasi ( <div id="section1">cocok <a href="#section1">).
Atribut opsional data-offsetmenentukan jumlah piksel untuk diimbangi dari atas saat menghitung posisi gulir. Ini berguna ketika Anda merasa bahwa tautan di dalam bilah navigasi mengubah status aktif terlalu cepat atau terlalu dini saat melompat ke elemen yang dapat digulir. Standarnya adalah 10 piksel.
Memerlukan pemosisian relatif: Elemen dengan data-spy="scroll" memerlukan properti posisi CSS , dengan nilai "relatif" agar berfungsi dengan baik.
Contoh
<!-- 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>
Melalui JavaScript
Aktifkan secara manual dengan:
Contoh
$('body').scrollspy({target: ".navbar"})
Opsi Scrollspy
Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-offset="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll |
Metode Scrollspy
Tabel berikut mencantumkan semua metode scrollspy yang tersedia.
| Method | Description | Try it |
|---|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
Acara Scrollspy
Tabel berikut mencantumkan semua peristiwa scrollspy yang tersedia.
| Event | Description | Try it |
|---|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |
Lebih Banyak Contoh
Scrollspy dengan gulungan animasi
Cara menambahkan gulir halaman halus ke jangkar di halaman yang sama:
Pengguliran halus
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// 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
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
Scrollspy & Afiks
Menggunakan plugin Affix bersama dengan plugin Scrollspy:
Menu Horisontal (Bilah Navigasi)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Menu Vertikal (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>