Plugins Sticky JavaScript Reference
Foundation fournit des composants JavaScript pour les plugins Sticky comme indiqué ci-dessous.
Initialisation
Vous pouvez initialiser sticky en JavaScript en utilisant les plugins foundation.sticky.js et foundation.core.js . Le plugin nécessite les bibliothèques suivantes -
foundation.util.triggers.js
foundation.util.mediaQuery.js
Fondation.Sticky
Il spécifie une instance de sticky comme défini ci-dessous -
var elem = new Foundation.Sticky(element);| N ° Sr. | Nom et description | Type |
|---|---|---|
| 1 | element Il crée un objet jQuery dans un sticky. |
jQuery |
| 2 | options Le paramètre par défaut du plug-in est remplacé. |
Objet |
Options de plug-in
Vous pouvez utiliser les plugins suivants pour personnaliser l'instance persistante. Vous pouvez définir l'option du plugin en tant qu'attributs de données individuels.
| N ° Sr. | Nom et description | Exemple |
|---|---|---|
| 1 | container Pour le style et le dimensionnement, des classes peuvent être incluses. |
'' |
| 2 | stickTo Définit l'emplacement où l'élément doit coller. |
'Haut' |
| 3 | anchor Inclut l'identifiant de cet élément, qui est ancré à l'élément unique. |
'exempleId' |
| 4 | topAnchor Considère l'identifiant d'ancrage supérieur si, plus d'éléments sont utilisés comme points d'ancrage. |
'exampleId: top' |
| 5 | btmAnchor Prend en compte l'ID d'ancrage inférieur si plusieurs éléments sont utilisés comme points d'ancrage. |
'exempleId: bas' |
| 6 | marginTop Définit la marge en em pour l'élément supérieur lorsqu'il devient collant. |
1 |
| sept | marginBottom Définit la marge en em pour l'élément du bas lorsqu'il devient collant. |
1 |
| 8 | stickyOn La chaîne de point d'arrêt doit devenir collante. |
'moyen' |
| 9 | stickyClass Applique la classe à l'élément collant et supprime lors de la destruction. |
'gluant' |
| 11 | containerClass Applique la classe au conteneur collant. Par défaut, c'est sticky-container . |
'sticky-container' |
| 12 | checkEvery Les points collants sont recalculés par le nombre d'événements de défilement entre les plugins. |
50 |
Événements
Les plugins collants attachés à n'importe quel élément peuvent déclencher les événements suivants.
| N ° Sr. | Nom et description |
|---|---|
| 1 | stuckto.zf.sticky Il déclenche un événement lorsque $ element est devenu position: fixed; et Espacement des noms en haut ou en bas . |
| 2 | unstuckfrom.zf.sticky Il déclenche un événement lorsque $ element est ancré et namespaced en haut ou en bas . |
Les fonctions
Voici les fonctions utilisées dans sticky.
._pauseListeners
Pour faire défiler l'événement, le gestionnaire est supprimé et l'événement est changé en ancre.
| N ° Sr. | Nom et description | Type |
|---|---|---|
| 1 | scrollListener La fenêtre est attachée avec un écouteur de défilement unique et espacé. |
chaîne |
._calc
À chaque événement de défilement , le calcul est appelé et en fonction de la valeur mise en cache et des valeurs booléennes, _init déclenche les fonctions.
| N ° Sr. | Nom et description | Type |
|---|---|---|
| 1 | checkSizes Le plugin recalcule la taille et les points d'arrêt s'il est défini sur true. |
Booléen |
| 2 | scroll Fait défiler la position actuelle de l'événement qui est passé à partir de la fonction cb. Sinon, par défaut, il est défini sur window.pageYOffset |
Nombre |
.détruire
L'élément collant actuel est détruit; l'élément est remis en position haute. Il supprime le JS, qui inclut les classes et les propriétés css et $ element est déroulé lorsque JS inclut $ container .
.emCalc
La fonction d'assistance est utilisée pour calculer les valeurs em.
| N ° Sr. | Nom et description | Type |
|---|---|---|
| 1 | Number Le nombre de ems est calculé en pixels. |
em |