Bootstrap5 Scrollspy
Le plugin Scrollspy, c'est-à-dire le plugin de navigation à mise à jour automatique, met automatiquement à jour la cible de navigation correspondante en fonction de la position de la barre de défilement. Son implémentation de base suit le défilement.
Comment créer un Scrollspy
L'exemple suivant montre comment créer un Scrollspy :
Exemple
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<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>
<div id="section1">
<h1>Section 1</h1>
<p>Essayez de faire défiler cette page et regardez la barre de navigation pendant le défilement !</p>
</div>
...
</body>
Essayez-le vous-même »
Analyse de l'exemple
Ajoutez à l'élément que vous souhaitez surveiller (généralement body)data-bs-spy="scroll" 。
Ajoutez ensuitedata-bs-targetattribut, dont la valeur est l'id ou la classe de la barre de navigation (.navbar). Cela le relie à la zone de défilement.
Notez que l'id sur les éléments défilables (<div id="section1">) doit correspondre aux options de lien de la barre de navigation (<a href="../index.html">).
Optionnel, l'attributdata-bs-offsetest utilisé pour calculer les pixels de décalage depuis le haut lors du calcul de la position de défilement. La valeur par défaut est 10px.
Définir le positionnement relatif :L'utilisation d'élémentsdata-spy="scroll"nécessite de définir leur attribut CSSpositionà"relative"pour fonctionner.
L'exemple suivant configure un scrollspy vertical :
Exemple
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">Barre de navigation</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Élément 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Élément 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Élément 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Élément 2</a>
<a class="nav-link active" href="#item-3">Élément 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">Élément 3-1</a>
<a class="nav-link ms-3 my-1 active" href="#item-3-2">Élément 3-2</a>
</nav>
</nav>
</nav>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0">
<h4 id="item-1">Élément 1</h4>
<p>...</p>
<h5 id="item-1-1">Élément 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Élément 1-2</h5>
<p>...</p>
<h4 id="item-2">Élément 2</h4>
<p>...</p>
<h4 id="item-3">Élément 3</h4>
<p>...</p>
<h5 id="item-3-1">Élément 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Élément 3-2</h5>
<p>...</p>
</div>
</div>
</div>
Essayez-le vous-même »
Formulaire de groupe de liste :
Exemple
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Élément 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Élément 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Élément 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Élément 4</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="list-item-1">Élément 1</h4>
<p>...</p>
<h4 id="list-item-2">Élément 2</h4>
<p>...</p>
<h4 id="list-item-3">Élément 3</h4>
<p>...</p>
<h4 id="list-item-4">Élément 4</h4>
<p>...</p>
</div>
Essayez-le vous-même »
Autres extensions