Scrollspy

Perbarui navigasi Bootstrap atau daftar komponen grup secara otomatis berdasarkan posisi gulir untuk menunjukkan tautan mana yang saat ini aktif di viewport.

Di halaman ini

Bagaimana itu bekerja

Scrollspy mengaktifkan .activekelas pada elemen jangkar ( <a>) ketika elemen dengan idreferensi oleh jangkar di href-scroll ke tampilan. Scrollspy paling baik digunakan bersama dengan komponen Bootstrap nav atau grup daftar , tetapi itu juga akan berfungsi dengan elemen jangkar apa pun di halaman saat ini. Berikut cara kerjanya.

Untuk memulai, scrollspy memerlukan dua hal: navigasi, grup daftar, atau kumpulan tautan sederhana, ditambah wadah yang dapat digulir. Wadah yang dapat digulir dapat berupa <body>atau elemen khusus dengan set heightdan overflow-y: scroll.
Pada wadah yang dapat digulir, tambahkan data-bs-spy="scroll"dan data-bs-target="#navId"di mana navIdkeunikan idnavigasi terkait. Pastikan juga menyertakan a tabindex="0"untuk memastikan akses keyboard.
Saat Anda menggulir wadah "mata-mata", sebuah .activekelas ditambahkan dan dihapus dari tautan jangkar dalam navigasi terkait. Tautan harus memiliki idtarget yang dapat diselesaikan, jika tidak maka akan diabaikan. Misalnya, a <a href="#home">home</a>harus sesuai dengan sesuatu di DOM seperti<div id="home"></div>
Elemen target yang tidak terlihat akan diabaikan. Lihat bagian Elemen yang tidak terlihat di bawah.

Contoh

Gulir area di bawah bilah navigasi dan perhatikan perubahan kelas yang aktif. Buka menu dropdown dan lihat item dropdown juga disorot.

Judul pertama

Ini adalah beberapa konten placeholder untuk halaman scrollspy. Perhatikan bahwa saat Anda menggulir halaman ke bawah, tautan navigasi yang sesuai akan disorot. Ini diulang di seluruh contoh komponen. Kami terus menambahkan beberapa salinan contoh di sini untuk menekankan pengguliran dan penyorotan.

Judul kedua

Judul ketiga

Judul keempat

Judul kelima

<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

navigasi bersarang

Scrollspy juga berfungsi dengan .navs bersarang. Jika bersarang .navadalah .active, orang tuanya juga akan .active. Gulir area di sebelah navbar dan perhatikan perubahan kelas yang aktif.