Bootstrap 4 Scrollspy (Lanjutan)
Bootstrap 4 Scrollspy
Scrollspy digunakan untuk memperbarui tautan secara otomatis dalam daftar navigasi berdasarkan posisi gulir .
Cara Membuat Scrollspy
Contoh berikut menunjukkan cara membuat scrollspy:
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-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="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>
Contoh Dijelaskan
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.
Menu Vertikal Scrollspy
Dalam contoh ini, kami menggunakan pil navigasi vertikal Bootstrap sebagai menu:
Contoh
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3
col-4" id="myScrollspy">
<ul class="nav nav-pills
flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
...
</ul>
</nav>
<div class="col-sm-9
col-8">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the
menu while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
Referensi Scrollspy Bootstrap Lengkap
Untuk referensi lengkap semua opsi scrollspy, metode, dan acara, buka Referensi Scrollspy Bootstrap JS kami .