JS Affix (affix.js)
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 "coller" à 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.
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.
Pour plus d' informations, lisez notre Bootstrap Tutorial Affix .
Astuce: Le plugin Affix est souvent utilisé conjointement avec le Scrollspy plugin.
Via data-* Attributs
Ajouter des data-spy="affix" à l'élément que vous souhaitez espionner, et des data-offset-top|bottom=" number " attribut pour calculer la position de la volute.
Exemple
<ul class="nav nav-pills nav-stacked" data-spy="affix"
data-offset-top="205">
Essayez - le vous - même » Via JavaScript
Activer manuellement:
Apposer options
Les options peuvent être transmises par l'intermédiaire des attributs de données ou JavaScript. Pour les attributs de données, ajouter le nom de l'option pour de données, comme dans les données offset = "".
| prénom | Type | Défaut | La description |
|---|---|---|---|
| offset | number | object | function | 10 | Indique le nombre de pixels pour compenser à partir de l'écran lors du calcul de la position de défilement. Lors de l'utilisation d'un seul numéro, le décalage est ajouté aux deux directions supérieure et inférieure. Si vous voulez seulement pour contrôler le haut ou le bas, utilisez un objet, comme offset: {top:25} Pour plusieurs décalages, utilisez offset: {top:25, bottom:50} en offset: {top:25, bottom:50} Astuce: Utilisez une fonction pour fournir dynamiquement un décalage (peut être utile pour des conceptions sensibles) |
| target | selector | node | element | the window object | Indique l'élément cible de l'affixe |
Apposer Events
Le tableau suivant répertorie les événements de affixes tous disponibles.
| un événement | La description | Essayez-le |
|---|---|---|
| affix.bs.affix | Survient avant le positionnement fixe est ajouté à l'élément (par exemple, lorsque le .affix-top classe est sur le point d'être remplacé par le .affix classe) | Essayez - le |
| affixed.bs.affix | Survient après le positionnement fixe est ajouté à l'élément (par exemple, après la .affix-top classe est remplacé par le .affix classe) | Essayez - le |
| affix-top.bs.affix | Survient avant l'élément supérieur retourne à sa position d' origine (non fixée) (par exemple, la .affix classe est sur le point d'être remplacé par .affix-top ) | Essayez - le |
| affixed-top.bs.affix | Survient après l'élément supérieur retourne à sa position d' origine (non fixée) (par exemple, la .affix classe a été remplacé par .affix-top ) | Essayez - le |
| affix-bottom.bs.affix | Se produit avant l'élément de fond revient à sa position d' origine (non fixe) (par exemple, la .affix classe est sur le point d'être remplacé par .affix-bottom ) | Essayez - le |
| affixed-bottom.bs.affix | Intervient après l'élément de fond revient à sa position d' origine (non fixée) (par exemple, la .affix classe a été remplacé par .affix-bottom ) | Essayez - le |
Exemples
navbar apposée
Créer un menu de navigation horizontale fixée:
Exemple
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> Essayez - le vous - même » Utilisation de jQuery pour apposer automatiquement un navbar
Utilisez jQuery outerHeight() méthode pour fixer la barre de navigation après que l'utilisateur a fait défiler passé un élément spécifié (<header>) :
Exemple
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
}); Essayez - le vous - même » Scrollspy & Affix
Utilisation du plug - in Affix avec le Scrollspy plugin:
Menu horizontal (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> Essayez - le vous - même » 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> Essayez - le vous - même » navbar Animated sur affixe
Utilisez CSS pour manipuler les différentes .affix des classes:
Exemple - Changer la couleur de fond et le rembourrage de navbar on scroll
.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;
} Essayez - le vous - même » Exemple - Faites glisser 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;
} Essayez - le vous - même »