Bootstrap 5 Scrollspy

Scrollspy

Scrollspy utilizzato perScorrimentoAggiornamento automatico della lista dei link nella navigazione.

Come creare un Scrollspy

Come creare un Scrollspy

L'esempio seguente mostra come creare un Scrollspy:

Esempio
<!-- Area scrollabile -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Barra di navigazione - Gli elementi <a> sono usati per saltare a una sezione specifica dell'area scrollabile -->
</div>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <ul class="navbar-nav">
    </div>
<li><a href="#section1">Sezione 1</a></li>
</nav>
<div id="section1">
  <!-- Sezione 1 -->
  <h1>Sezione 1</h1>
<p>Prova a scorrere questa pagina e guarda la barra di navigazione mentre scorri!</p>
</div>
...

</body>

Prova te stesso

Esempio di spiegazione data-bs-spy="scroll" Aggiungi all'elemento utilizzato come area scrollabile (solitamente <body> elemento).

Poi aggiungi data-bs-target Attributo, il cui valore è id o il nome della classe della barra di navigazione (.navbar). Questo è per assicurarsi che la barra di navigazione sia collegata all'area scrollabile.

Attenzione, l'elemento scrollabile deve corrispondere all'ID del link all'interno dell'elenco della barra di navigazione (<div id="section1"> Corrispondenza <a href="#section1">)

Opzionale data-bs-offset L'attributo determina il numero di pixel di offset dal punto superiore durante il calcolo della posizione di scorrimento. È utile quando i link nella barra di navigazione saltano a un elemento scrollabile se si sente che il cambiamento di stato attivo è troppo presto. Il valore predefinito è 10 pixel.

Posizione relativa necessariaL'elemento con data-bs-spy="scroll" richiede CSS Posizione L'attributo del valore deve essere "relative" per funzionare correttamente.