Plugin Bootstrap Affix (Avancé)

Le plugin d'affixe

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

Le plug-in active et désactive ce comportement (modifie la valeur de CSS positionde staticà fixed), en fonction de la position de défilement.

Exemple 1) Une barre de navigation apposée :

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

Avec Affix, lorsque nous faisons défiler la page de haut en bas, le menu est toujours visible et verrouillé dans sa position.

Comment créer un menu de navigation attaché

L'exemple suivant montre comment créer un menu de navigation fixe horizontal :

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

Exemple expliqué

Ajoutez data-spy="affix"à l'élément que vous souhaitez apposer.

Ajoutez éventuellement l' data-offset-top|bottomattribut pour calculer la position du défilement.

Comment ça fonctionne

Le plugin d'affixe bascule entre trois classes : .affix, .affix-topet .affix-bottom. Chaque classe représente un état particulier. Vous devez ajouter des propriétés CSS pour gérer les positions réelles, à l'exception de position:fixed sur la .affixclasse.

• Le plugin ajoute la classe .affix-topou .affix-bottompour indiquer que l'élément est dans sa position la plus haute ou la plus basse. Le positionnement avec CSS n'est pas nécessaire à ce stade.


• Le défilement au-delà de l'élément apposé déclenche l'apposition réelle - C'est là que le plugin remplace la classe .affix-topou .affix-bottompar la .affixclasse (sets position:fixed). À ce stade, vous devez ajouter le CSS topou la bottompropriété pour positionner l'élément apposé dans la page.


• Si un décalage inférieur est défini, le faire défiler remplace la .affixclasse par .affix-bottom. Étant donné que les décalages sont facultatifs, en définir un nécessite que vous définissiez le CSS approprié. Dans ce cas, ajoutez position:absolutesi nécessaire.

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

Scrollspy & Affixe

Utilisation du plugin Affix avec le plugin Scrollspy :

Référence complète d'affixe Bootstrap

Pour une référence complète de toutes les méthodes et événements d'affixe, consultez notre Bootstrap JS Affix Reference .