The Scrollspy Plugin
The Scrollspy plugin digunakan untuk secara otomatis memperbarui link dalam daftar menu berdasarkan posisi gulir.
Cara Membuat Scrollspy
Contoh berikut menunjukkan cara membuat scrollspy sebuah:
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 " misalnya Dijelaskan
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.
Menu Scrollspy Vertikal
Dalam contoh ini, kita menggunakan pil navigasi vertikal Bootstrap sebagai menu:
Contoh
<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> Cobalah sendiri " Menyelesaikan Bootstrap Scrollspy Referensi
Untuk referensi lengkap semua metode scrollspy dan acara, pergi ke kami Bootstrap JS Scrollspy Referensi .