Unduh react stickynode - Unduh Kode Sumber react stickynode

react stickynode

Data situs web

v5.0.1

Unduh

React-stickynode

Komponen lengket bereaksi yang berkinerja dan komprehensif.

Komponen lengket membungkus target lengket dan menjaga target di viewport saat pengguna menggulir halaman. Sebagian besar komponen lengket menangani kasing di mana target lengket lebih pendek dari viewport, tetapi tidak terjadi di mana target lengket lebih tinggi dari viewport. Alasannya adalah bahwa perilaku dan implementasi yang diharapkan jauh lebih rumit.

react-stickynode menangani tidak hanya kasing biasa tetapi target target panjang yang panjang dengan cara yang alami. Dalam kasus reguler, saat menggulir halaman ke bawah, react-stickynode akan menempel di bagian atas viewport. Tetapi dalam kasus target lengket yang lebih tinggi, itu akan menggulir bersama dengan halaman sampai bagian bawahnya mencapai bagian bawah viewport. Dengan kata lain, sepertinya bagian bawah viewport menarik bagian bawah target lengket ke bawah saat menggulir halaman ke bawah. Di sisi lain, saat menggulir halaman ke atas, bagian atas viewport menarik bagian atas target lengket ke atas.

Perilaku ini memberikan konten dalam target lengket tinggi lebih banyak kesempatan untuk ditampilkan. Ini sangat bagus untuk kasus di mana banyak iklan berada di rel yang tepat.

Sorotan lain adalah bahwa react-stickynode dapat menangani casing di mana target lengket menggunakan persentase sebagai unit lebar. Untuk halaman yang dirancang responsif, ini sangat berguna.

Fitur

Ambil scrollTop hanya sekali untuk semua komponen lengket.
Dengarkan pengguliran yang dilemparkan untuk memiliki kinerja yang lebih baik.
Gunakan RAF untuk memperbarui status lengket untuk memiliki kinerja yang lebih baik.
Dukung Offset Top dari atas layar.
Dukung batas bawah untuk menghentikan status lengket.
Dukung target lengket apa pun dengan berbagai unit lebar.

Penggunaan

npm install react-stickynode

Sticky menggunakan fitur Modernizr csstransforms3d dan prefixed (Link) untuk mendeteksi IE8/9, sehingga dapat menurunkan peringkat untuk tidak menggunakan 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 > ;

Alat peraga

Nama	Jenis	Catatan
`enabled`	Boolean	Sakelar untuk mengaktifkan atau menonaktifkan Sticky (true secara default).
`top`	Nomor/String	Offset dari bagian atas jendela di mana bagian atas elemen akan berada ketika keadaan lengket dipicu (0 secara default). Jika itu adalah pemilih ke target (melalui `querySelector()` ), offset akan menjadi ketinggian target.
`bottomBoundary`	Nomor/String	Offset dari atas dokumen yang keadaan rilis akan dipicu ketika bagian bawah elemen mencapai AT. Jika itu adalah pemilih ke target (melalui `querySelector()` ), offset akan menjadi bagian bawah target.
`innerZ`	Nomor/String	z-indeks dari yang lengket.
`enableTransforms`	Boolean	Aktifkan penggunaan transformasi CSS3 (true secara default).
`activeClass`	Rangkaian	Nama kelas yang akan diterapkan pada elemen ketika keadaan lengket aktif ( `active` secara default).
`innerClass`	Rangkaian	Nama kelas yang akan diterapkan pada elemen dalam ( `''` secara default).
`innerActiveClass`	Rangkaian	Nama kelas yang akan diterapkan pada elemen dalam ketika keadaan lengket aktif ( `''` secara default).
`className`	Rangkaian	Nama kelas yang akan diterapkan pada elemen yang terlepas dari keadaan lengket.
`releasedClass`	Rangkaian	Nama kelas yang akan diterapkan pada elemen ketika keadaan tempel dirilis ( `released` secara default).
`onStateChange`	Fungsi	Panggilan balik untuk saat keadaan lengket berubah. Lihat di bawah.
`shouldFreeze`	Fungsi	Callback untuk menunjukkan kapan plugin lengket harus membekukan posisi dan mengabaikan acara gulir/mengubah ukuran. Lihat di bawah.

Menangani perubahan negara

Anda dapat diberi tahu ketika keadaan komponen lengket berubah dengan memberikan panggilan balik ke prop onStateChange . Callback akan menerima objek dalam format {status: CURRENT_STATUS} , dengan CURRENT_STATUS menjadi bilangan bulat yang mewakili status:

Nilai	Nama	Catatan
`0`	`STATUS_ORIGINAL`	Status default, terletak di posisi asli.
`1`	`STATUS_RELEASED`	Status yang dirilis, yang terletak di suatu tempat di dokumen, tetapi tidak default.
`2`	`STATUS_FIXED`	Status lengket, terletak dipasang di bagian atas atau bagian bawah layar.

Anda dapat mengakses status sebagai konstanta statis untuk digunakan untuk perbandingan.

 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 mendukung fungsi anak -anak:

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

Pembekuan

Anda dapat memberikan fungsi dalam prop shouldFreeze yang akan memberi tahu komponen untuk sementara berhenti memperbarui selama perubahan prop dan state, serta mengabaikan acara gulir dan mengubah ukuran. Fungsi ini harus mengembalikan boolean yang menunjukkan apakah komponen saat ini harus dibekukan.