Scrollspy

Aghjurnate automaticamente a navigazione Bootstrap o i cumpunenti di u gruppu di lista basatu nantu à a pusizione di scroll per indicà quale ligame hè attualmente attivu in a finestra di vista.

In sta pagina

Cumu funziona

Scrollspy cambia a .activeclassa nantu à l'elementi di l'ancora ( <a>) quandu l'elementu cù u idriferimentu da l'ancora hrefhè scrollatu in vista. Scrollspy hè megliu utilizatu in cunghjunzione cù un cumpunente di navigazione Bootstrap o un gruppu di lista , ma ancu travaglià cù qualsiasi elementi di ancora in a pagina attuale. Eccu cumu si travaglia.

Per principià, scrollspy richiede duie cose: una navigazione, un gruppu di lista, o un set simplice di ligami, più un containeru scrollable. U cuntinuu scrollable pò esse u <body>o un elementu persunalizatu cù un set heightè overflow-y: scroll.
Nantu à u cuntinuu scrollable, aghjunghje data-bs-spy="scroll"è data-bs-target="#navId"induve navIdhè l'unicu iddi a navigazione assuciata. Assicuratevi di include ancu un tabindex="0"per assicurà l'accessu à u teclatu.
Mentre scorri u cuntinuu "spiatu", una .activeclassa hè aghjuntu è sguassata da i ligami d'ancora in a navigazione assuciata. I ligami devenu avè idobiettivi risolvibili, altrimenti sò ignorati. Per esempiu, un <a href="#home">home</a>deve currisponde à qualcosa in u DOM cum'è<div id="home"></div>
Elementi di destinazione chì ùn sò micca visibili seranu ignorati. Vede a rùbbrica Elementi micca visibili sottu.

Esempii

Scroll the area below the navbar and watch the active class change. Apertura u menù drop-down è fighjate l'articuli drop-down esse evidenziati ancu.

Prima rubrica

Questu hè un cuntenutu di piazzamentu per a pagina scrollspy. Nota chì mentre scorri a pagina, u ligame di navigazione appropritatu hè evidenziatu. Hè ripetutu in tuttu l'esempiu di cumpunenti. Continuemu à aghjunghje un pocu di copie di esempiu quì per enfatizà u scrolling è l'evidenziazione.

Seconda rubrica

Terzu capu

Quarta rubrica

Quinta rubrica

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

Nav nidificatu

Scrollspy travaglia ancu cù .navs nidificati. Se un nidificatu .navhè .active, i so genitori seranu ancu .active. Scorri l'area accantu à a barra di navigazione è fighjate u cambiamentu di classa attiva.