Le Plugin Scrollspy
Le plugin Scrollspy est utilisé pour mettre à jour automatiquement les liens dans une liste de navigation basé sur la position de défilement.
Comment faire pour 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-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> Essayez - le vous - même » Exemple Explained
Ajouter des data-spy="scroll" à l'élément qui doit être utilisé comme zone de défilement (souvent c'est le <body> élément).
Puis ajouter le data-target attribut avec une valeur de l'ID ou le nom de la classe de la barre de navigation ( .navbar ). Ceci est pour vous assurer que la barre de navigation est relié à la zone de défilement.
Notez que les éléments défilants doivent correspondre à l'ID des liens à l' intérieur liste des éléments de la barre de navigation ( <div id="section1"> correspond à <a href="#section1"> ).
L'option de data-offset de data-offset attribut spécifie le nombre de pixels pour compenser de haut lors du calcul de la position de défilement. Ceci est utile lorsque vous vous sentez que les liens à l'intérieur de la barre de navigation change l'état actif trop tôt ou trop tôt lors d'un saut aux éléments défilants. Par défaut est de 10 pixels.
Nécessite un positionnement relatif: L'élément avec les data-spy="scroll" nécessite la CSS position de la propriété, avec une valeur de "relative" pour fonctionner correctement.
Menu Scrollspy Vertical
Dans cet exemple, nous utilisons des pilules de navigation verticales Bootstrap que le menu:
Exemple
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div
class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to
scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body> Essayez - le vous - même » Remplissez Bootstrap Scrollspy Référence
Pour une référence complète de toutes les méthodes et les événements scrollspy, rendez - vous à notre Bootstrap JS Scrollspy Référence .