Bootstrap 4 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 se fait lorsque vous faites défiler.

Comment créer un Scrollspy

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

Exemple

<!--Zone défilable--> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <!-- La barre de navigation - Les éléments <a> servent à accéder à une section dans la zone défilable --> <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> <!--Contenu de la première section--> <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 »

Analyse de l'exemple

Ajoutez à l'élément que vous souhaitez surveiller (généralement body)data-spy="scroll" 。

Ajoutez ensuitedata-targetun attribut, dont la valeur est l'id ou la classe de la barre de navigation (.navbar). Cela le connecte à la zone défilable.

Notez que l'id sur l'élément défilable (<div id="section1">) doit correspondre aux options de lien de la barre de navigation (<a href="../index.html">).

Facultatifdata-offsetL'attribut est 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 10 px.

Définir le positionnement relatif :L'élément utilisant data-spy="scroll" doit avoir sa propriété CSSpositiondéfinie sur "relative" pour fonctionner.

L'exemple suivant configure un scrollspy vertical :

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>Essayez de faire défiler cette page et regardez la liste de navigation pendant le défilement !</p> </div> ... </div> </div> </div> </body>

Essayez-le »
Autres extensions