JS Scrollspy (scrollspy.js)
Il plugin Scrollspy viene utilizzato per aggiornare automaticamente i collegamenti in un elenco di navigazione basato sulla posizione di scorrimento.
Per un tutorial su Scrollspy, leggere la nostra Bootstrap Scrollspy tutorial .
Suggerimento: Il plugin Scrollspy è spesso usato insieme al Affix plugin.
Via data-* Attributi
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 navbar è 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.
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 " Via JavaScript
Attivare manualmente con:
Opzioni Scrollspy
Le opzioni possono essere passati attraverso gli attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome opzione per data-, come nel data-offset = "".
| Nome | Digitare | Predefinito | Descrizione | Provalo |
|---|---|---|---|---|
| offset | number | 10 | Specifica il numero di pixel per compensare dall'alto nel calcolo della posizione di scorrimento | Provalo |
Metodi Scrollspy
La seguente tabella elenca tutti i metodi scrollspy disponibili.
| metodo | Descrizione | Provalo |
|---|---|---|
| .scrollspy("refresh") | Quando aggiungere e rimuovere elementi dal scrollspy, questo metodo può essere utilizzato per aggiornare il documento | Provalo |
Eventi Scrollspy
La seguente tabella elenca tutti disponibili eventi scrollspy.
| Evento | Descrizione | Provalo |
|---|---|---|
| activate.bs.scrollspy | Si verifica quando un nuovo articolo viene attivato dal scrollspy | Provalo |
Esempi
Scrollspy con scorrimento animato
Come aggiungere una pagina di scorrimento liscia per un'ancora sulla stessa pagina:
scorrimento continuo
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar",
offset: 50});
// Add smooth scrolling to all links inside a navbar
$("#myNavbar a").on('click', function(event){
//
Prevent default anchor click behavior
event.preventDefault();
// Store hash (#)
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
//
The optional number (800) specifies the number of milliseconds it takes to scroll to
the specified area (the speed of the animation)
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}); Prova tu stesso " Scrollspy & Affix
Utilizzando il Affix plug insieme con il plugin Scrollspy:
Menu orizzontale (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> Prova tu stesso " Menu verticale (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills
nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body> Prova tu stesso "