introduction
Lors de la rédaction d'un blog, de nombreux sous-titres sont souvent utilisés pour l'organisation. Lorsque l'article est long, vous devez faire des allers-retours entre différents titres. Si vous ajoutez manuellement un répertoire et ajoutez un point d'ancrage, il est vraiment gênant. Pour cette raison, vous pouvez générer dynamiquement une zone de répertoire et utiliser le plug-in Affix fourni par bootstrap pour réparer la zone de répertoire sur la page. La documentation bootstrap l'utilise
Préparation - Présentation de bootstrap.min.js
Mettez bootstrap.min.js dans la balise de script avant le corps, et uikit.min.js ne seront pas introduits pour le moment.
Après avoir introduit des plug-ins connexes, notre idée est de générer d'abord automatiquement des points d'ancrage et du contenu de menu basé sur l'article, puis d'y ajouter un affixe pour produire un effet fixe, puis d'utiliser le plug-in ScrollSpy de l'UIKIT (il y a aussi ScrollSpy dans Bootstrap, et la méthode d'utilisation est presque la même).
Introduire l'apprentissage de l'utilisation de l'affixe
Le plug-in Affix nous aide à résoudre la position de la pièce de navigation et à ajouter des décalages verticaux aux éléments fixes en fonction de la situation de défilement de l'utilisateur, de sorte que le NAV passe entre trois classes:
1.Affix-top: indique en haut
2.Affix: signifie faire défiler sur la page, ajouter des attributs fixes et utiliser des décalages personnalisés
3.Affix-fond: signifie atteindre le bas
Pour activer Affix, ne nécessite que le code suivant:
$ ('# nav'). Affix ({offset: {top: $ ('en-tête'). offset (). top, en bas: ($ ('footter'). OuterHeight (true) + $ ('. application'). OuterHeight (true)) + 40}});1. Organisez des pièces de code HTML
<ul id = "mysidebar"> </ul>
Assurez-vous d'ajouter des classes de navigation et d'affiche pour UL.
2. Générer le code d'encapsulation
Présentez cet extrait de code dans votre propre script de script
; $. fn.extend ({"createAFix": function (sélecteur) {$ list = $ ("" + sélecteur), longueur = $ list.length, affixValue = ""; for (var i = 0; i <longueur; i ++) {// ajouter name attribut $ list.eq (i) .attr ("id", ("node" + i)); var text = $ list.eq (i) .text (); this.append (affixVALUe);Le principe du code ci-dessus est de passer dans une balise ou une classe qui doit être considérée comme une unité de titre pour la fonction CreateAFFix, et y ajouter des liens d'ancrage pendant le processus de traversée.
3. Comment utiliser
Écriture de pièces HTML
<ul id = "mysidebar"> <li> <a href = "# node1"> </a> </li> <li> <a href = "# node2"> </a> </li> <li> <a href = "# node3"> </a> </li> </ul> <h3 id = "node1"> Title 1 </h3> 2 </h3> <h3 id = "node3"> titre 3 </h3>
Écriture de la section JavaScript
$ (function () {$ ('#mysidebar'). createAFix ('h3'); // indique que dans l'article, la balise `H3` doit être ajoutée à l'ancre.});Résoudre le problème du décalage du point d'ancrage
Étant donné que le point d'ancrage déplace la page en haut de l'élément d'ancrage par défaut, c'est-à-dire, si nous effectuons l'opération ci-dessus sur le titre 1, lorsque nous cliquons sur le point d'ancrage, la page passera à la position supérieure où se trouve le `` titre 1 ''. S'il y a une barre de menu en haut, il sera bloqué et résolu en définissant le style CSS.
.Class {/ * L'ajout de rembourrage peut faire déplacer l'ancrage de l'ancre PX vers le bas, c'est-à-dire, sautez la hauteur de la barre de menu. Compenser la pièce vierge causée par le padding-top en définissant la marge sur une valeur négative * / padding-top: num px; marge: -num px;}Ajouter une écoute de défilement
Actuellement, notre documentation DOM est comme ça.
<ul id = "mysidebar"> <li> <a href = "# node1"> </a> </li> <li> <a href = "# node2"> </a> </li> <li> <a href = "# node3"> </a> </li> </ul>
Traitez-le, introduisez l'attribut Uikit et vérifiez le document pour plus de détails
<ul id = "mysidebar" data-uk-scrollspy-nav = "{le plus proche: 'li', smoothscrool: true}"> <li> <a href = "# node1"> </a> </li> <li> <a href = "# node2"> </a> </li> <li> <a href = "# # node3"> </a>Introduire uikit.min.js
Étant donné que notre élément de menu (LI) est exécuté après le chargement du document, si le ScrollSpy d'Uikit est exécuté avant la génération de l'élément de menu, il ne fonctionnera certainement pas. Par conséquent, nous devons introduire uikit.min.js après la génération de l'élément de menu. Le code est le suivant:
$ (function () {$ ('#mysidebar'). CreateAFix ('H3'); // Générer le menu $ .getscript ("uikit.min.js"); // Chargement uikit.min.js de manière asynchrone, et la surveillance de défilement prend effet.});