Scrollspy Bootstrap 5

Scrollspy

Scrollspy digunakan untuk menyesuaikanGulirDaftar tautan dalam daftar navigasi otomatis diperbarui.

Bagaimana Membuat Scrollspy

Bagaimana Membuat Scrollspy

Contoh berikut menunjukkan bagaimana membuat Scrollspy:

Contoh
<!-- Area penyorotan -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Navigasi - <a> elemen digunakan untuk melompat ke bagian yang dapat disorot di dalam area penyorotan -->
</div>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <ul class="navbar-nav">
    </div>
<li><a href="#section1">Section 1</a></li>
</nav>
<div id="section1">
  <!-- Section 1 -->
  <h1>Section 1</h1>
<p>Coba gerakkan halaman ini dan lihat navigasi saat menggerakkan!</p>
</div>
...

</body>

Coba Sendiri

Menggambarkan contoh data-bs-spy="scroll" Tambahkan ke elemen yang digunakan sebagai area penyorotan (biasanya <body> elemen）。

Lalu tambahkan data-bs-target Atribut, nilai nya adalah id atau nama kelas navigasi (.navbar）。 Ini untuk memastikan navigasi terhubung dengan area penyorotan.

Perhatikan, elemen penyorotan harus cocok dengan ID link di dalam daftar item navigasi (<div id="section1"> 佩斯 <a href="#section1">）。

Opsional data-bs-offset Atribut menentukan jumlah piksel offset dari atas dalam menghitung posisi penyorotan. Ini sangat bermanfaat ketika link di dalam navigasi melompat ke elemen penyorotan, jika Anda merasa perubahan status aktif terlalu awal, ini sangat bermanfaat. Nilai defaultnya adalah 10 piksel.

yang memerlukan penempatan relatif：Elemen yang memiliki data-bs-spy="scroll" memerlukan CSS Posisi Nilai atribut harus diatur menjadi "relative" untuk beroperasi dengan benar.