Bootstrap 4 Scrollspy (avanzato)
Bootstrap 4 Spia pergamena
Scrollspy viene utilizzato per aggiornare automaticamente i collegamenti in un elenco di navigazione in base alla posizione di scorrimento .
Come creare una spia pergamena
L'esempio seguente mostra come creare uno scrollspy:
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><a href="#section1">Section 1</a></li>
...
</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>
Esempio spiegato
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.
Menu verticale di Scrollspy
In questo esempio, utilizziamo le pillole di navigazione verticale di Bootstrap come menu:
Esempio
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3
col-4" id="myScrollspy">
<ul class="nav nav-pills
flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
...
</ul>
</nav>
<div class="col-sm-9
col-8">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the
menu while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
Riferimento completo di Bootstrap Scrollspy
Per un riferimento completo di tutte le opzioni, i metodi e gli eventi di scrollspy, vai al nostro Bootstrap JS Scrollspy Reference .