react stickynode Download - react stickynode Source Code Download

react stickynode

بيانات الموقع

v5.0.1

تنزيل

React-Stickynode

مكون لزج شامل وشامل.

يلف المكون اللزج هدفًا لزجًا ويحافظ على الهدف في منفذ العرض بينما يقوم المستخدم بتمرير الصفحة. تتعامل معظم المكونات اللزجة مع الحالة التي يكون فيها الهدف اللزج أقصر من منفذ العرض ، ولكن ليس الحالة التي يكون فيها الهدف اللزج أطول من منفذ العرض. والسبب هو أن السلوك والتنفيذ المتوقع أكثر تعقيدًا.

لا يتولى react-stickynode حالة منتظمة فحسب ، بل الحالة المستهدفة الطويلة بطريقة طبيعية. في الحالة العادية ، عند التمرير للصفحة لأسفل ، سوف يلتزم react-stickynode بأعلى منفذ العرض. ولكن في حالة وجود هدف لزج أطول ، سيتم تمريره مع الصفحة حتى يصل أسفله إلى أسفل منفذ العرض. بمعنى آخر ، يبدو أن الجزء السفلي من Viewport يسحب الجزء السفلي من الهدف اللزج لأسفل عند تمرير الصفحة لأسفل. من ناحية أخرى ، عند التمرير لأعلى ، يقوم الجزء العلوي من إطار العرض بسحب الجزء العلوي من الهدف اللزج.

يمنح هذا السلوك المحتوى في هدف طويل طويل القامة فرصة أكبر لإظهاره. هذا جيد بشكل خاص للحالة التي توجد فيها العديد من الإعلانات في السكك الحديدية الصحيحة.

ومن أبرز أبرز ما هو أن react-stickynode يمكنه التعامل مع الحالة التي يستخدم فيها الهدف اللزج النسبة المئوية كوحدة العرض الخاصة به. بالنسبة لصفحة مصممة مستجيبة ، فهي مفيدة بشكل خاص.

سمات

استرداد scrollTop مرة واحدة فقط لجميع المكونات اللاصقة.
استمع إلى التمرير المحظور للحصول على أداء أفضل.
استخدم RAF لتحديث الحالة اللاصقة للحصول على أداء أفضل.
دعم إزاحة أعلى من الجزء العلوي من الشاشة.
الدعم الحدود السفلية لوقف حالة لزجة.
دعم أي هدف لزج مع وحدات العرض المختلفة.

الاستخدام

npm install react-stickynode

يستخدم اللزجة ميزات Modernizr csstransforms3d وميزات (Link) prefixed للكشف عن IE8/9 ، بحيث يمكن تخفيض التصنيف لعدم استخدام 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 > ;

الدعائم

اسم	يكتب	ملحوظة
`enabled`	منطقية	التبديل لتمكين أو تعطيل لزجة (صحيح بشكل افتراضي).
`top`	الرقم/السلسلة	الإزاحة من أعلى النافذة حيث سيكون الجزء العلوي من العنصر عندما يتم تشغيل الحالة اللاصقة (0 بشكل افتراضي). إذا كان محددًا لهدف (عبر `querySelector()` ) ، فسيكون الإزاحة هو ارتفاع الهدف.
`bottomBoundary`	الرقم/السلسلة	سيتم تشغيل الإزاحة من الجزء العلوي من المستند الذي يتم إطلاق حالة الإصدار عندما يصل الجزء السفلي من العنصر إلى. إذا كان محددًا لهدف (عبر `querySelector()` ) ، فسيكون الإزاحة أسفل الهدف.
`innerZ`	الرقم/السلسلة	Z-index من اللزجة.
`enableTransforms`	منطقية	تمكين استخدام التحويلات CSS3 (صحيح بشكل افتراضي).
`activeClass`	خيط	اسم الفصل المراد تطبيقه على العنصر عندما تكون الحالة اللاصقة نشطة ( `active` بشكل افتراضي).
`innerClass`	خيط	اسم الفصل المراد تطبيقه على العنصر الداخلي ( `''` بشكل افتراضي).
`innerActiveClass`	خيط	يجب تطبيق اسم الفصل على العنصر الداخلي عندما تكون الحالة اللاصقة نشطة ( `''` بشكل افتراضي).
`className`	خيط	اسم الفصل المراد تطبيقه على العنصر المستقل عن الحالة اللزجة.
`releasedClass`	خيط	اسم الفصل المراد تطبيقه على العنصر عند إصدار الحالة اللاصقة ( `released` بشكل افتراضي).
`onStateChange`	وظيفة	رد الاتصال عندما تتغير الحالة اللاصقة. انظر أدناه.
`shouldFreeze`	وظيفة	رد الاتصال للإشارة إلى متى يجب على المكون الإضافي اللزج تجميد الموضع وتجاهل الأحداث التمرير/تغيير حجمها. انظر أدناه.

التعامل مع تغيير الدولة

يمكن أن يتم إخطارك عندما تتغير حالة المكون اللزج عن طريق تمرير رد الاتصال إلى Prop onStateChange . سيتلقى رد الاتصال كائنًا بالتنسيق {status: CURRENT_STATUS} ، مع كون CURRENT_STATUS عددًا صحيحًا يمثل الحالة:

قيمة	اسم	ملحوظة
`0`	`STATUS_ORIGINAL`	الحالة الافتراضية ، الموجودة في الموضع الأصلي.
`1`	`STATUS_RELEASED`	الحالة التي تم إصدارها ، الواقعة في مكان ما على المستند ، ولكن ليس افتراضيًا.
`2`	`STATUS_FIXED`	الحالة اللاصقة ، الموجودة على الجزء العلوي أو أسفل الشاشة.

يمكنك الوصول إلى الحالات كثوابت ثابتة لاستخدامها للمقارنة.

 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 وظائف الأطفال:

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

التجميد

يمكنك توفير وظيفة في shouldFreeze التي يجب أن تخبر المكون بالتوقف مؤقتًا عن التحديث أثناء تغييرات الدعامة والدولة ، وكذلك تجاهل التمرير وتغيير حجم الأحداث. يجب أن تعيد هذه الوظيفة منطقية تشير إلى ما إذا كان يجب تجميد المكون حاليًا أم لا.