Le plug-in Scroll Spy (Scrollspy), c'est-à-dire le plug-in de navigation à mise à jour automatique, mettra automatiquement à jour la cible de navigation correspondante en fonction de la position de la barre de défilement. Son implémentation de base consiste à ajouter une classe .active à la barre de navigation en fonction de la position de la barre de défilement lorsque vous faites défiler.
Si vous souhaitez référencer les fonctionnalités de ce plugin séparément, vous devez alors référencer scrollspy.js. Alternativement, comme mentionné dans le chapitre de présentation du plugin Bootstrap, vous pouvez référencer bootstrap.js ou une version minifiée de bootstrap.min.js.
1.Utilisation
Vous pouvez ajouter un comportement d'écoute de défilement à la navigation supérieure :
1. Via l'attribut data : ajoutez data-spy="scroll" à l'élément que vous souhaitez surveiller (généralement le corps). Ajoutez ensuite un attribut data-target avec l'ID ou la classe de l'élément parent du composant Bootstrap .nav. Pour que cela fonctionne, vous devez vous assurer qu'il existe dans le corps de la page un élément correspondant à l'ID du lien que vous souhaitez écouter.
1 2 3 4 5 6 7 8 9 |
|
2. Via JavaScript : vous pouvez appeler la surveillance du défilement via JavaScript, sélectionner l'élément à surveiller, puis appeler la fonction .scrollspy() :
$('body').scrollspy({ target: '.navbar-example' })
2. Surveillance du défilement
Le plug-in d'écoute de défilement est utilisé pour mettre à jour automatiquement les éléments de navigation en fonction de la position de la barre de défilement et afficher les points forts des éléments de navigation.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
|
Il y a deux attributs importants ici, comme indiqué ci-dessous :
PS : dans un menu et une situation simple, la mise en surbrillance de la surveillance par défilement peut être mise en œuvre de manière stable sans réglage de la cible de données. Mais lorsqu'il y a plusieurs navigations, si vous n'en associez pas une, cela provoquera une erreur, il est donc généralement nécessaire de l'ajouter.
Si vous utilisez des scripts JavaScript, vous pouvez supprimer data-* et utiliser les attributs de script pour définir : offset, espion et cible. La méthode spécifique est la suivante :
1 2 3 4 5 6 |
|
L'écouteur de défilement dispose également d'un événement pour passer à un nouvel élément.
//L'événement est lié à la navigation
$('#nav').on('activate.bs.scrollspy', function() {
alert('Cet événement est déclenché après l'activation de la nouvelle entrée !');
});
L'écouteur de défilement dispose également d'une méthode qui met à jour le DOM du conteneur.
//Partie HTML
1 2 3 4 5 6 |
|
//Lors de la suppression de contenu, actualisez le DOM pour éviter un mauvais placement de la surveillance de la navigation
1 2 3 4 |
|
Remarque : Cette méthode doit utiliser la déclaration data-*.
Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.