Bootstrap JS Scrollspy
JS Scrollspy (scrollspy.js)
Il plug-in 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 .
Suggerimento: il plug-in Scrollspy viene spesso utilizzato insieme al plug-in Affix .
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-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>
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 | Try it |
|---|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
Eventi di Scrollspy
La tabella seguente elenca tutti gli eventi scrollspy disponibili.
| Event | Description | Try it |
|---|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |
Altri esempi
Scrollspy con scorrimento animato
Come aggiungere uno scorrimento scorrevole della pagina a un'ancora nella stessa pagina:
Scorrimento fluido
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// 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
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
Spia pergamena e apporre
Utilizzando il plug-in Affix insieme al plug-in Scrollspy:
Menu orizzontale (barra di navigazione)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
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>