JS Scrollspy (scrollspy.js)
The Scrollspy plugin digunakan untuk secara otomatis memperbarui link dalam daftar menu berdasarkan posisi gulir.
Untuk tutorial tentang Scrollspy, baca Bootstrap Scrollspy Tutorial .
Tip: The Scrollspy Plugin ini sering digunakan bersama-sama dengan Afiks Plugin.
Via data-* Atribut
Tambahkan data-spy="scroll" untuk unsur yang harus digunakan sebagai daerah digulir (sering ini adalah <body> unsur).
Kemudian tambahkan data-target atribut dengan nilai id atau nama kelas dari bar navigasi ( .navbar ). Hal ini untuk memastikan bahwa navbar terhubung dengan daerah digulir.
Perhatikan bahwa elemen digulir harus sesuai dengan ID dari link di dalam daftar navbar ini semuanya ( <div id="section1"> cocok <a href="#section1"> ).
Opsional data-offset atribut menentukan jumlah pixel untuk mengimbangi dari atas ketika menghitung posisi gulir. Hal ini berguna ketika Anda merasa bahwa link dalam navbar perubahan keadaan aktif terlalu cepat atau terlalu dini ketika melompat ke elemen digulir. Default adalah 10 piksel.
Membutuhkan posisi relatif: Elemen dengan data-spy="scroll" membutuhkan CSS position properti, dengan nilai "relative" untuk bekerja 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>
Cobalah sendiri " via JavaScript
Aktifkan manual dengan:
Scrollspy Pilihan
Pilihan bisa dilalui melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan untuk data-, seperti data-offset = "".
| Nama | Mengetik | kegagalan | Deskripsi | Cobalah |
|---|---|---|---|---|
| offset | number | 10 | Menentukan jumlah piksel untuk mengimbangi dari atas ketika menghitung posisi gulir | Cobalah |
Metode Scrollspy
Tabel berikut mencantumkan semua metode scrollspy tersedia.
| metode | Deskripsi | Cobalah |
|---|---|---|
| .scrollspy("refresh") | Ketika menambahkan dan menghapus elemen dari scrollspy, metode ini dapat digunakan untuk me-refresh dokumen | Cobalah |
Acara Scrollspy
Tabel berikut berisi peristiwa scrollspy semua tersedia.
| Peristiwa | Deskripsi | Cobalah |
|---|---|---|
| activate.bs.scrollspy | Terjadi ketika item baru menjadi aktif oleh scrollspy yang | Cobalah |
contoh
Scrollspy dengan scroll animasi
Cara menambahkan halaman gulir halus untuk jangkar pada halaman yang sama:
bergulir mulus
// 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;
});
}); Cobalah sendiri " Scrollspy & Afiks
Menggunakan Afiks Plugin bersama-sama dengan plugin Scrollspy:
Horizontal Menu (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> Cobalah sendiri " 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> Cobalah sendiri "