Bootstrap JS Scrollspy
Spia pergamena JS
Scrollspy viene utilizzato per aggiornare automaticamente i collegamenti in un elenco di navigazione in base alla posizione di scorrimento.
Per un tutorial su Scrollspy, leggi il nostro Bootstrap Scrollspy Tutorial .
Via dati-* Attributi
Aggiungi data-spy="scroll"all'elemento che dovrebbe essere utilizzato come area scorrevole (spesso questo è l' <body>elemento).
Quindi aggiungi l' data-targetattributo con un valore dell'id o il nome della classe della barra di navigazione ( .navbar). Questo per assicurarsi che la barra di navigazione sia collegata all'area scorrevole.
Si noti che gli elementi scorrevoli devono corrispondere all'ID dei collegamenti all'interno degli elementi dell'elenco della barra di navigazione ( <div id="section1">match <a href="#section1">).
L'attributo facoltativo data-offsetspecifica il numero di pixel da spostare dall'alto durante il calcolo della posizione di scorrimento. Questo è utile quando ritieni che i collegamenti all'interno della barra di navigazione cambino lo stato attivo troppo presto o troppo presto quando si salta agli elementi scorrevoli. Il valore predefinito è 10 pixel.
Richiede il posizionamento relativo: l'elemento con data-spy="scroll" richiede la proprietà CSS position , con un valore di "relative" per funzionare correttamente.
Esempio
<!-- The scrollable area -->
<body data-spy="scroll"
data-target=".navbar" data-offset="50">
<!-- The navbar - The
<a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
....
</ul>
</nav>
<!-- Section 1
-->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at
the navigation bar while scrolling!</p>
</div>
...
</body>
Tramite JavaScript
Abilita manualmente con:
Esempio
$('body').scrollspy({target: ".navbar"})
Opzioni Scrollspy
Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungi il nome dell'opzione a data-, come in data-offset="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll |
Metodi Scrollspy
La tabella seguente elenca tutti i metodi scrollspy disponibili.
| Method | Description |
|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
| .scrollspy("dispose") | Destroys the scrollspy |
Eventi di Scrollspy
La tabella seguente elenca tutti gli eventi scrollspy disponibili.
| Event | Description |
|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |