Bootstrap JS Scrollspy
JS Scrollspy (scrollspy.js)
Le plugin Scrollspy est utilisé pour mettre à jour automatiquement les liens dans une liste de navigation en fonction de la position de défilement.
Pour un tutoriel sur Scrollspy, lisez notre Tutoriel Bootstrap Scrollspy .
Astuce : Le plugin Scrollspy est souvent utilisé avec le plugin Affix .
Via data-* Attributs
Ajoutez data-spy="scroll"à l'élément qui doit être utilisé comme zone de défilement (il s'agit souvent de l' <body>élément).
Ajoutez ensuite l' data-targetattribut avec une valeur de l'id ou du nom de classe de la barre de navigation ( .navbar). Cela permet de s'assurer que la barre de navigation est connectée à la zone de défilement.
Notez que les éléments déroulants doivent correspondre à l'ID des liens à l'intérieur des éléments de liste de la barre de navigation ( <div id="section1">matches <a href="#section1">).
data-offsetL' attribut facultatif spécifie le nombre de pixels à décaler du haut lors du calcul de la position du défilement. Ceci est utile lorsque vous sentez que les liens à l'intérieur de la barre de navigation changent l'état actif trop tôt ou trop tôt lors du saut vers les éléments défilants. La valeur par défaut est 10 pixels.
Nécessite un positionnement relatif : L'élément avec data-spy="scroll" nécessite la propriété CSS position , avec une valeur de "relative" pour fonctionner correctement.
Exemple
<!-- 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>
Via Javascript
Activer manuellement avec :
Exemple
$('body').scrollspy({target: ".navbar"})
Options d'espionnage de défilement
Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data-, comme dans 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 |
Méthodes Scrollspy
Le tableau suivant répertorie toutes les méthodes scrollspy disponibles.
| Method | Description | Try it |
|---|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
Événements d'espionnage
Le tableau suivant répertorie tous les événements scrollspy disponibles.
| Event | Description | Try it |
|---|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |
Plus d'exemples
Scrollspy avec défilement animé
Comment ajouter un défilement de page fluide à une ancre sur la même page :
Défilement fluide
// 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
});
Scrollspy & Affixe
Utilisation du plugin Affix avec le plugin Scrollspy :
Menu horizontal (barre de navigation)
<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 vertical (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>