react stickynode Download - react stickynode Source Téléchargement du code

react stickynode

Données du site Web

v5.0.1

Télécharger

réagir

Une composante collante réactive performante et complète.

Un composant collant enroule une cible collante et maintient la cible dans la fenêtre de la fenêtre lorsque l'utilisateur fait défiler la page. La plupart des composants collants gèrent le boîtier où la cible collante est plus courte que la fenêtre, mais pas le cas où une cible collante est plus haute que la fenêtre. La raison en est que le comportement et la mise en œuvre attendus sont beaucoup plus compliqués.

react-stickynode gère non seulement le boîtier régulier, mais aussi le long boîtier cible collant de manière naturelle. Dans le cas régulier, lors du défilement de la page vers le bas, react-stickynode s'en tiendra en haut de la fenêtre. Mais dans le cas d'une cible collante plus grande, il fait défiler avec la page jusqu'à ce que son bas atteigne le bas de la fenêtre. En d'autres termes, il semble que le bas de la fenêtre de la fenêtre tire le bas d'une cible collante vers le bas lors du défilement de la page vers le bas. D'un autre côté, lors du défilement de la page vers le haut, le haut de la fenêtre de la fenêtre tire le haut d'une cible collante vers le haut.

Ce comportement donne au contenu dans une haute cible collante plus de chances d'être montrée. Ceci est particulièrement bon pour le cas où de nombreuses annonces se trouvent dans le bon rail.

Un autre point fort est que react-stickynode peut gérer le cas où une cible collante utilise le pourcentage comme unité de largeur. Pour une page conçue réactive, elle est particulièrement utile.

Caractéristiques

Récupérez scrollTop une seule fois pour toutes les composants collants.
Écoutez le défilement étranglé pour avoir de meilleures performances.
Utilisez RAF pour mettre à jour le statut collant pour avoir de meilleures performances.
Supporter le décalage supérieur en haut de l'écran.
Soutenez la limite du bas pour arrêter le statut collant.
Soutenez toute cible collante avec diverses unités de largeur.

Usage

npm install react-stickynode

Le Sticky utilise les fonctionnalités modernizr csstransforms3d et prefixed (lien) pour détecter IE8 / 9, afin qu'il puisse rétrograder pour ne pas utiliser Transform3D.

 import Sticky from 'react-stickynode' ;

< Sticky enabled = { true } top = { 50 } bottomBoundary = { 1200 } >
    < YourComponent />
</ Sticky > ;

 import Sticky from 'react-stickynode' ;

< Sticky top = "#header" bottomBoundary = "#content" >
    < YourComponent />
</ Sticky > ;

Accessoires

Nom	Taper	Note
`enabled`	Booléen	Le commutateur pour activer ou désactiver Sticky (vrai par défaut).
`top`	Numéro / chaîne	Le décalage en haut de la fenêtre où le haut de l'élément sera lorsque l'état collant sera déclenché (0 par défaut). S'il s'agit d'un sélecteur d'une cible (via `querySelector()` ), le décalage sera la hauteur de la cible.
`bottomBoundary`	Numéro / chaîne	Le décalage du haut du document quel état de version sera déclenché lorsque le bas de l'élément atteint. S'il s'agit d'un sélecteur d'une cible (via `querySelector()` ), le décalage sera le bas de la cible.
`innerZ`	Numéro / chaîne	Z-index du collant.
`enableTransforms`	Booléen	Activez l'utilisation des transformations CSS3 (vrai par défaut).
`activeClass`	Chaîne	Nom de classe à appliquer à l'élément lorsque l'état collant est actif ( `active` par défaut).
`innerClass`	Chaîne	Nom de classe à appliquer à l'élément intérieur ( `''` par défaut).
`innerActiveClass`	Chaîne	Nom de classe à appliquer à l'élément intérieur lorsque l'état collant est actif ( `''` par défaut).
`className`	Chaîne	Nom de classe à appliquer à l'élément indépendant de l'état collant.
`releasedClass`	Chaîne	Nom de classe à appliquer à l'élément lorsque l'état collant est libéré ( `released` par défaut).
`onStateChange`	Fonction	Rappel pour le moment où l'état collant change. Voir ci-dessous.
`shouldFreeze`	Fonction	Rappel pour indiquer quand le plugin collant doit geler la position et ignorer les événements de défilement / redimensionner. Voir ci-dessous.

Gestion du changement d'état

Vous pouvez être informé lorsque l'état du composant collant change en passant un rappel à l'hélice onStateChange . Le rappel recevra un objet dans le format {status: CURRENT_STATUS} , CURRENT_STATUS étant un entier représentant l'état:

Valeur	Nom	Note
`0`	`STATUS_ORIGINAL`	L'état par défaut, situé à la position d'origine.
`1`	`STATUS_RELEASED`	Le statut publié, situé dans un endroit sur un document, mais pas un par défaut.
`2`	`STATUS_FIXED`	Le statut collant, situé fixé en haut ou en bas de l'écran.

Vous pouvez accéder aux statuts en tant que constantes statiques à utiliser pour la comparaison.

 import Sticky from 'react-stickynode' ;

const handleStateChange = ( status ) => {
    if ( status . status === Sticky . STATUS_FIXED ) {
        console . log ( 'the component is sticky' ) ;
    }
} ;

< Sticky onStateChange = { handleStateChange } >
    < YourComponent />
</ Sticky > ;

Sticky soutient également les fonctions des enfants:

 import Sticky from 'react-stickynode' ;

< Sticky >
    { ( status ) => {
        if ( status . status === Sticky . STATUS_FIXED ) {
            return 'the component is sticky' ;
        }
        if ( status . status === Sticky . STATUS_ORIGINAL ) {
            return 'the component in the original position' ;
        }
        return 'the component is released' ;
    } }
</ Sticky > ;

Gel

Vous pouvez fournir une fonction dans l'hélice shouldFreeze qui indiquera au composant d'arrêter temporairement la mise à jour pendant les modifications de l'hélice et de l'état, ainsi que d'ignorer les événements de défilement et de redimensionnement. Cette fonction doit renvoyer un booléen indiquant si le composant doit actuellement être gelé.