Scrollspy Bootstrap 5

Scrollspy

Scrollspy est utilisé pourDéfilementLes liens de la liste de navigation automatique sont mis à jour en position.

Comment créer un Scrollspy

Comment créer un Scrollspy

L'exemple suivant montre comment créer un Scrollspy :

Exemple
<!-- Zone défilable -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Navigation bar - L'élément <a> est utilisé pour sauter à un certain endroit dans la zone défilable -->
</div>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <ul class="navbar-nav">
    </div>
<li><a href="#section1">Section 1</a></li>
</nav>
<div id="section1">
  <!-- Section 1 -->
  <h1>Section 1</h1>
<p>Essayez de faire défiler cette page et regardez la barre de navigation pendant que vous faites défiler !</p>
</div>
...

</body>

Essayez-le vous-même

Expliquez l'exemple data-bs-spy="scroll" Ajoutez à l'élément utilisé comme zone défilable (généralement <body> l'élément).

Ensuite, ajoutez data-bs-target L'attribut, dont la valeur est l'ID ou le nom de classe de la barre de navigation (.navbar) Cela garantit que la barre de navigation est connectée à la zone défilable.

Veuillez noter que l'élément défilable doit correspondre à l'ID du lien dans la liste de la barre de navigation (<div id="section1"> Correspondance <a href="#section1">)

Optionnel data-bs-offset L'attribut spécifie le nombre de pixels d'offset du sommet lors du calcul de la position de défilement. C'est utile si vous ressentez un changement prématuré de l'état actif lors du saut vers un élément défilable dans la barre de navigation. La valeur par défaut est de 10 pixels.

La position relative est nécessaireLes éléments avec data-bs-spy="scroll" nécessitent CSS Position La valeur de l'attribut de l'property doit être "relative" pour fonctionner correctement.