Bootstrap 4 Scrollspy (Avancé)
Bootstrap 4 Scrollspy
Scrollspy est utilisé pour mettre à jour automatiquement les liens dans une liste de navigation en fonction de la position de défilement .
Comment créer un Scrollspy
L'exemple suivant montre comment créer un scrollspy :
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-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>
Exemple expliqué
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.
Menu Vertical Scrollspy
Dans cet exemple, nous utilisons les pilules de navigation verticale de Bootstrap comme menu :
Exemple
<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>
Référence complète de Bootstrap Scrollspy
Pour une référence complète de toutes les options, méthodes et événements de scrollspy, consultez notre référence Bootstrap JS Scrollspy .