Il plugin Scrollspy
Il plugin Scrollspy viene utilizzato per aggiornare automaticamente i collegamenti in un elenco di navigazione basato sulla posizione di scorrimento.
Come creare un Scrollspy
L'esempio seguente mostra come creare un 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-inverse navbar-fixed-top">
...
<ul class="nav
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> Prova tu stesso " esempio spiegato
Aggiungi data-spy="scroll" per l'elemento che dovrebbe essere utilizzato come area scorrevole (spesso questo è il <body> elemento).
Quindi aggiungere la data-target attributo con un valore di ID o il nome della classe della barra di navigazione ( .navbar ). Questo per fare in modo che la barra di navigazione è collegato con l'area scorrevole.
Si noti che gli elementi scorrevoli devono corrispondere l'ID dei link all'interno voci di elenco della barra di navigazione ( <div id="section1"> corrisponde <a href="#section1"> ).
L'opzionale data-offset attributo specifica il numero di pixel per compensare dall'alto nel calcolo della posizione di scorrimento. Questo è utile quando si sente che i collegamenti all'interno della barra di navigazione cambia lo stato attivo troppo presto o troppo presto quando si salta agli elementi scorrevoli. Il valore predefinito è 10 pixel.
Richiede posizionamento relativo: l'elemento con data-spy="scroll" richiede l'CSS position proprietà, con un valore di "relative" per funzionare correttamente.
Menu Scrollspy verticale
In questo esempio, usiamo le pillole di navigazione verticale di bootstrap come menù:
Esempio
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div
class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to
scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body> Prova tu stesso " Completare Bootstrap Scrollspy di riferimento
Per un riferimento completo di tutti i metodi e gli eventi scrollspy, vai alla nostra Bootstrap JS Scrollspy di riferimento .