Affixe Bootstrap JS
Affixe JS (affixe.js)
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 plugin active et désactive ce comportement (modifie la valeur de la position CSS de statique à fixe), en fonction de la position de défilement.
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.
Pour plus d'informations, lisez notre tutoriel Bootstrap Affix .
Astuce : Le plugin Affix est souvent utilisé avec le plugin Scrollspy .
Via data-* Attributs
Ajoutez data-spy="affix"à l'élément que vous souhaitez espionner, et l'
attribut pour calculer la position du défilement.data-offset-top|bottom="number"
Exemple
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
Via Javascript
Activer manuellement avec :
Exemple
$('.nav').affix({offset: {top: 150} });
Options d'affixe
Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data-, comme dans data-offset="".
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | object | function | 10 |
Specifies the number of pixels to offset from screen when calculating position of scroll. When using a single number, the offset is added to both top and bottom directions. If you only want to control the top or the bottom, use an object, like offset: {top:25}For multiple offsets, use offset: {top:25, bottom:50}Tip: Use a function to dynamically provide an offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifies the target element of the affix |
Affixer des événements
Le tableau suivant répertorie tous les événements d'affixe disponibles.
| Event | Description | Try it |
|---|---|---|
| affix.bs.affix | Occurs before fixed positioning is added to the element (e.g, when the .affix-top class is about to be replaced with the .affix class) |
|
| affixed.bs.affix | Occurs after fixed positioning is added to the element (e.g., after the .affix-top class is replaced with the .affix class) |
|
| affix-top.bs.affix | Occurs before the top element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-top) |
|
| affixed-top.bs.affix | Occurs after the top element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-top) |
|
| affix-bottom.bs.affix | Occurs before the bottom element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-bottom) |
|
| affixed-bottom.bs.affix | Occurs after the bottom element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-bottom) |
Plus d'exemples
Barre de navigation apposée
Créez un menu de navigation fixe horizontal :
Exemple
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
Utilisation de jQuery pour apposer automatiquement une barre de navigation
Utilisez la méthode outerHeight() de jQuery pour fixer la barre de navigation après que l'utilisateur a fait défiler un élément spécifié (<header>) :
Exemple
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
Scrollspy & Affixe
Utilisation du plugin Affix avec le plugin Scrollspy :
Menu horizontal (barre de navigation)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Menu vertical (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>
Barre de navigation animée sur l'affixe
Utilisez CSS pour manipuler les différentes classes .affix :
Exemple - Modifier la couleur d'arrière-plan et le rembourrage de la barre de navigation lors du défilement
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff !important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
}
Exemple - Glisser dans la barre de navigation
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}