Scrollspy

Actualizați automat navigarea Bootstrap sau listați componentele grupului pe baza poziției de defilare pentru a indica ce link este activ în prezent în fereastra de vizualizare.

Pe aceasta pagina

Cum functioneaza

Scrollspy comută .activeclasa pe <a>elementele ancoră ( ) atunci când elementul la care idface referire ancoră hrefeste derulat la vedere. Scrollspy este cel mai bine utilizat împreună cu o componentă de navigare Bootstrap sau cu un grup de liste , dar va funcționa și cu orice elemente de ancorare din pagina curentă. Iată cum funcționează.

Pentru a începe, scrollspy necesită două lucruri: o navigare, un grup de liste sau un simplu set de link-uri, plus un container care poate fi derulat. Containerul derulabil poate fi <body>sau un element personalizat cu un set heightși overflow-y: scroll.
Pe containerul care poate fi derulat, adăugați data-bs-spy="scroll"și data-bs-target="#navId"unde navIdeste unicul idnavigației asociate. Asigurați-vă că includeți și un tabindex="0"pentru a asigura accesul la tastatură.
Pe măsură ce derulați containerul „spionat”, o .activeclasă este adăugată și eliminată din linkurile de ancorare din navigația asociată. Linkurile trebuie să aibă ținte rezolvabile id, altfel sunt ignorate. De exemplu, un <a href="#home">home</a>trebuie să corespundă cu ceva în DOM ca<div id="home"></div>
Elementele țintă care nu sunt vizibile vor fi ignorate. Consultați secțiunea Elemente nevizibile de mai jos.

Exemple

Derulați zona de sub bara de navigare și urmăriți schimbarea clasei active. Deschideți meniul drop-down și urmăriți ca elementele drop-down sunt, de asemenea, evidențiate.

Primul titlu

Acesta este un conținut substituent pentru pagina scrollspy. Rețineți că pe măsură ce derulați în jos în pagină, linkul de navigare corespunzător este evidențiat. Se repetă în întregul exemplu de componentă. Continuăm să adăugăm câteva exemple de copie aici pentru a sublinia derularea și evidențierea.

Al doilea titlu

Al treilea titlu

Al patrulea titlu

Al cincilea titlu

<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>

Navigare imbricată

Scrollspy funcționează și cu .navs imbricate. Dacă un imbricat .naveste .active, părinții săi vor fi și .active. Derulați zona de lângă bara de navigare și urmăriți schimbarea clasei active.