react stickynode Download - react stickynode Source Code Download reagieren

react stickynode

Website-Daten

v5.0.1

Herunterladen

React-Stickynode

Eine Performantin und umfassende reagierende Klebstoffkomponente.

Eine klebrige Komponente wickelt ein klebriges Ziel und hält das Ziel im Ansichtsfenster, wenn der Benutzer die Seite scrollt. Die meisten klebrigen Komponenten verarbeiten das Gehäuse, in dem das klebrige Ziel kürzer ist als das Ansichtsfenster, aber nicht der Fall, in dem ein klebriges Ziel größer ist als das Ansichtsfenster. Der Grund dafür ist, dass das erwartete Verhalten und die erwartete Implementierung viel komplizierter sind.

react-stickynode verarbeitet nicht nur einen regulären Fall, sondern auch das lange klebrige Zielfall auf natürliche Weise. Im regulären Fall hält sich react-stickynode beim Scrollen der Seite nach unten an die Oberseite des Ansichtsfensters. Bei einem größeren klebrigen Ziel wird es jedoch zusammen mit der Seite scrollen, bis der Boden den Boden des Ansichtsfensters erreicht. Mit anderen Worten, es sieht so aus, als würde der Boden des Ansichtsports beim Scrollen der Seite nach unten den Boden eines klebrigen Ziels nach unten ziehen. Auf der anderen Seite zieht das Oberteil des Ansichtsfensatzes beim Scrollen der Seite die Oberseite eines klebrigen Ziels nach oben.

Dieses Verhalten gibt den Inhalt in einem hohen klebrigen Ziel mehr Chance, gezeigt zu werden. Dies ist besonders gut für den Fall, in dem sich viele Anzeigen in der richtigen Schiene befinden.

Ein weiteres Highlight ist, dass react-stickynode das Gehäuse verarbeiten kann, in dem ein klebriges Ziel den Prozentsatz als Breiteneinheit verwendet. Für eine reaktionsschnelle Seite ist sie besonders nützlich.

Merkmale

scrollTop nur einmal für alle klebrigen Komponenten abrufen.
Hören Sie sich gedrosselte Scrollen an, um eine bessere Leistung zu erzielen.
Verwenden Sie RAF, um den Sticky -Status zu aktualisieren, um eine bessere Leistung zu erzielen.
Unterstützen Sie den oberen Offset von oben auf dem Bildschirm.
Unterstützen Sie die untere Grenze, um den Sticky -Status zu stoppen.
Unterstützen Sie ein klebriges Ziel mit verschiedenen Breiteneinheiten.

Verwendung

npm install react-stickynode

Der Sticky verwendet Modernizr csstransforms3d und prefixed (Link) -Funktionen, um IE8/9 zu erkennen, sodass es transform3D nicht verwendet werden kann.

 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 > ;

Requisiten

Name	Typ	Notiz
`enabled`	Boolean	Der Schalter zur Aktivierung oder Deaktivierung von Sticky (standardmäßig wahr).
`top`	Nummer/Zeichenfolge	Der Offset von oben im Fenster, in dem sich die Oberseite des Elements befindet, wenn der klebrige Zustand ausgelöst wird (0 standardmäßig). Wenn es sich um einen Selektor für ein Ziel (über `querySelector()` ) handelt, ist der Offset die Höhe des Ziels.
`bottomBoundary`	Nummer/Zeichenfolge	Der Offset vom oberen Rand des Dokuments, in dem der Freigabestatus ausgelöst wird, wird ausgelöst, wenn der Boden des Elements angeht. Wenn es sich um einen Selektor für ein Ziel (über `querySelector()` ) handelt, ist der Offset der Boden des Ziels.
`innerZ`	Nummer/Zeichenfolge	Z-Index des Sticky.
`enableTransforms`	Boolean	Aktivieren Sie die Verwendung von CSS3 -Transformationen (standardmäßig wahr).
`activeClass`	Saite	Klassenname, der auf das Element angewendet wird, wenn der klebrige Zustand aktiv ist (standardmäßig `active` ).
`innerClass`	Saite	Klassenname, der auf das innere Element angewendet werden soll ( `''` standardmäßig).
`innerActiveClass`	Saite	Klassenname, der auf das innere Element angewendet werden soll, wenn der klebrige Zustand aktiv ist ( `''` standardmäßig).
`className`	Saite	Klassenname auf das Element unabhängig vom klebrigen Zustand angewendet werden.
`releasedClass`	Saite	Klassenname, der auf das Element angewendet wird, wenn der Sticky -Status veröffentlicht wird (standardmäßig `released` ).
`onStateChange`	Funktion	Rückruf für den Zeitpunkt, an dem sich der klebrige Zustand ändert. Siehe unten.
`shouldFreeze`	Funktion	Rückruf, um anzugeben, wann das klebrige Plugin die Position einfrieren und die Ereignisse der Scroll/Größe ignorieren sollte. Siehe unten.

Veränderung des Handlingszustands

Sie können benachrichtigt werden, wenn sich der Status der klebrigen Komponente ändert, indem Sie einen Rückruf an die onStateChange -Requisit weitergeben. Der Rückruf erhält ein Objekt im Format {status: CURRENT_STATUS} , wobei CURRENT_STATUS eine Ganzzahl der Status darstellt:

Wert	Name	Notiz
`0`	`STATUS_ORIGINAL`	Der Standardstatus, der sich an der ursprünglichen Position befindet.
`1`	`STATUS_RELEASED`	Der freigegebene Status, der sich in einem Dokumenten befindet, jedoch nicht in Standard.
`2`	`STATUS_FIXED`	Der klebrige Status, der oben oder unten auf dem Bildschirm befestigt ist.

Sie können auf die Status als statische Konstanten zugreifen, die zum Vergleich verwendet werden sollen.

 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 > ;

Auch Sticky Unterstützung Kinderfunktionen:

 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 > ;

Einfrieren

Sie können eine Funktion in der shouldFreeze -Requisite bereitstellen, die der Komponente anweiset, dass sie vorübergehend die Aktualisierung während der Requisiten- und Zustandsänderungen einstellen sowie die Schriftrolle ignorieren und die Größenänderung Ereignisse ignorieren. Diese Funktion sollte einen Booleschen zurückgeben, der angibt, ob die Komponente derzeit eingefroren werden soll.