Affix est un contrôle utile dans Bootstrap, qui peut surveiller la position de la barre de défilement du navigateur et garder votre navigation dans la zone visible de la page à tout moment. Au début, la navigation était une disposition de streaming normale dans la page, occupant une position fixe dans le document. Lorsque la page a fait défiler, la navigation est devenue automatiquement une disposition fixe (fixe), toujours dans la zone de visualisation de l'utilisateur. Parlons de son utilisation. Tout d'abord, jetons un coup d'œil à son principe de mise en œuvre. Il est réalisé en modifiant les attributs de classe des éléments de page en temps réel
Au début, l'attribut AFFXI sera automatiquement ajouté à la classe de l'élément qui applique un affixe.
Lorsque la barre de défilement défile de sorte que la navigation est sur le point d'atteindre le haut de la page, l'affixe sera modifié pour afficher dans la classe de l'élément.
Lorsque vous faites glisser la barre de défilement vers le bas de la page, l'affixe changera automatiquement à Affix-Bottom
Le processus ci-dessus est complètement mis en œuvre par le contrôle lui-même, et nous n'avons pas besoin d'intervenir. Nous avons juste besoin d'écrire le CSS dans ces États.
Si nous pouvons définir
.Affix-top {top: 150px;}. Affix {top: 20px; // Les sites Web habituellement construits avec bootstrap ont une barre de navigation à la tête} .Affix-Bottom {…}Jetons un coup d'œil à comment il est utilisé
1. Passez l'attribut de données
Il vous suffit d'ajouter Data-Spy = "Affix" à l'élément de page que vous devez écouter. Ensuite, utilisez des décalages pour déterminer l'angle et le désactivation d'un élément.
<ul data-spy = "affix" Data-Offset-top = "190"> <li> <a href = "# one"> tutoriel un </a> </li> <li> <a href = "# deux"> Tutoriel deux </a> </li> <li> <a href = "# trois"> Tutoriel </a> </li> </ul>
où les données-décalés se trouvent la position où l'élément d'état du sommet des affix est situé en haut de la page. Lorsque vous faites défiler en haut de la page, nous pouvons définir le style ".Affix" pour réinitialiser sa valeur "supérieure".
2. Appel via JavaScript
L'exemple de code est le suivant:
$ ('# mynav'). affix ({offset: {top: 100, // La position en haut de la page en défilement est en bas: fonction () {// la position en bas de la page lorsque le défilement est terminé (this.bottom = $ ('.Le code HTML est le suivant (seul le code de base s'affiche):
<ul id = "mynav"> <li> <a href = "# one"> tutoriel un </a> </li> <li> <a href = "# deux"> Tutoriel deux </a> </li> <li> <a href = "# trois"> Tutoriel trois </a> </li> </ul>… <div> </v>
Ce qui précède semble avoir introduit l'utilisation de l'affixe dans Bootstrap, mais dans le processus d'utilisation réel, nous constaterons que lors de la traînée de la barre de défilement, la largeur des éléments de la page à l'aide de l'affixe changera, entraînant une disposition de page désordonnée. Par conséquent, il est préférable d'écrire sa largeur dans le CSS qui définit des affix, tels que:
.Affix {largeur: 250px;}De cette façon, il n'y a aucun problème lorsque la fenêtre est suffisamment grande, mais lorsque vous faites glisser et changez la taille de la fenêtre, vous constaterez que la disposition est à nouveau gâchée. Ce problème m'a troublé depuis longtemps. Enfin, en analysant le code source de BootCSS, j'ai constaté que le site Web a ajouté des attributs "Hidden Print", "Hidden-XS", "Hidden-SM" à toutes les classes qui utilisent des éléments Affix. Il est utilisé pour masquer Affix lorsque l'écran ne répond pas aux exigences. Bien qu'il affecte la facilité d'utilisation, il garantit que la disposition est soignée dans tous les cas.
Ce qui précède est une explication détaillée de l'utilisation des commandes d'apôts dans Bootstrap et du chemin pour maintenir la belle disposition. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!