Bootstrap Affix Plugin (Advanced)

Le Plugin Affix

Le plugin Affix permet à un élément de devenir apposé (verrouillé) à une zone de la page. Ceci est souvent utilisé avec des menus de navigation ou les boutons d'icônes sociales, pour les faire "stick" à une zone spécifique pendant le défilement vers le haut et en bas de la page.

Le plugin permet de basculer ce comportement sur et en dehors (modifie la valeur de la position de CSS statique fixe), en fonction de la position de défilement.

Exemple 1) Une navbar apposée:

Exemple 2) Une barre latérale apposée:

Avec Apposer, lorsque nous défiler vers le haut et vers le bas de la page, le menu est toujours visible et verrouillée dans sa position.

Comment faire pour créer un menu de navigation Apposée

L'exemple suivant montre comment créer un menu de navigation horizontale fixée:

L'exemple suivant montre comment créer un menu de navigation vertical fixé:

Exemple Explained

Ajouter des data-spy="affix" à l'élément que vous voulez apposée.

Eventuellement, ajoutez le data-offset-top|bottom attribut pour calculer la position du défilement.

Comment cela fonctionne

L'affixe du plugin permet de basculer entre trois classes: .affix , .affix-top , et .affix-bottom . Chaque classe représente un état particulier. Vous devez ajouter les propriétés CSS pour gérer les positions réelles, à l'exception de la position:fixed sur la .affix classe.

• Le plugin ajoute le .affix-top ou .affix-bottom de classe pour indiquer l'élément est en son sommet le plus bas ou plus en position. Positionnement avec CSS n'est pas nécessaire à ce stade.


• Défilement passé l'élément apposé déclenche l'apposition réelle - c'est où le plugin remplace le .affix-top ou .affix-bottom classe avec la .affix classe (ensembles position:fixed ). À ce stade, vous devez ajouter le CSS top ou bottom propriété pour positionner l'élément apposé sur la page.


• Si un décalage de fond est définie, le défilement passé , il remplace la .affix classe avec .affix-bottom . Comme les compensations sont facultatifs, un réglage vous oblige à définir la CSS appropriée. Dans ce cas, ajouter position:absolute lorsque cela est nécessaire.

Dans le premier exemple ci - dessus, le plugin Affix ajoute la .affix classe (position: fixed) à la <nav> élément lorsque nous avons fait défiler 197 pixels de haut. Si vous ouvrez l'exemple, vous verrez aussi que nous avons ajouté la CSS top propriété avec une valeur de 0 à la .affix classe. Ceci est pour vous assurer que la barre de navigation reste en haut de la page à tout moment, quand nous avons fait défiler 197 pixels de haut.

Scrollspy & Affix

Utilisation du plug - in Affix avec le Scrollspy plugin:

Remplissez Bootstrap Affix Référence

Pour une référence complète de tous apposer des méthodes et des événements, rendez - vous à notre Bootstrap JS Affix Référence .