Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Beberapa desain situs web menggunakan tajuk yang "menempel" di bagian atas layar saat Anda menggulir ke bawah. Header yang tetap terlihat saat Anda menggulir sering disebut header lengket.

Anda bisa menambahkan sticky header ke situs React Anda dengan menulis sendiri kode kustom atau dengan menggunakan library pihak ketiga.

Apa Itu Header Lengket?

Header lengket adalah header yang tetap berada di bagian atas layar saat pengguna menggulir ke bawah halaman. Ini dapat berguna untuk menjaga agar informasi penting tetap terlihat saat pengguna menggulir.

Ingat, bagaimanapun, bahwa header tongkat mengurangi jumlah ruang layar untuk desain Anda yang tersisa. Jika Anda menggunakan tajuk lengket, ada baiknya membuatnya tetap pendek.

Membuat Tajuk Lengket

Hal pertama yang perlu Anda lakukan adalah menyiapkan penangan onscroll. Fungsi ini akan berjalan setiap kali pengguna menggulir. Anda dapat melakukannya dengan menambahkan pendengar acara onscroll ke objek jendela dan dengan

menggunakan React hook. Untuk menyiapkan onscroll handler, Anda perlu menggunakan hook useEffect dan metode addEventListener dari objek window.

Kode berikut membuat komponen tajuk lengket dan menatanya menggunakan CSS.

impor Bereaksi, { useState, useEffect } dari 'reaksi';
fungsiStickyHeader() {
const [isSticky, setSticky] = useState(PALSU);
const handleScroll = () => {
const jendelaScrollTop = jendela.scrollY;
 jika (windowScrollTop > 10) {
 setLengket(BENAR);
 } kalau tidak {
 setLengket(PALSU);
 }
 };
 gunakanEfek(() => {
 jendela.addEventListener('menggulir', handleScroll);
kembali () => {
 window.removeEventListener('menggulir', handleScroll);
 };
 }, []);
const item = [
 {
 nama: 'Rumah',
 tautan: '/'
 },
 {
 nama: 'Tentang',
 tautan: '/about'
 },
 {
 nama: 'Kontak',
 tautan: '/contact'
 }
 ];
const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
kembali (
<div namakelas="Aplikasi">
<gaya tajuk={{ latar belakang: isSticky? '#fff': '', lebar: '100%', zIndeks: '999', posisi: Apakah Lengket ?'tetap':'mutlak' }}>
 {items.peta (item => (
<a href={item.link} key={item.name}>
 {nama barang}
</A>
 ))}
</header>
<ul>
 {data.peta((x) => {
 kembali (<li kunci={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
eksporbawaan StickyHeader;

Metode ini menggunakan gaya inline, tetapi Anda juga dapat menggunakan kelas CSS. Misalnya:

.lengket {
 posisi: tetap;
 atas: 0;
 lebar: 100%;
 indeks-z: 999;
}

Halaman yang dihasilkan akan terlihat seperti ini:

Fitur tambahan

Ada beberapa hal lain yang dapat Anda lakukan untuk membuat tajuk lengket Anda lebih ramah pengguna. Misalnya, Anda dapat menambahkan tombol kembali ke atas atau membuat tajuk transparan saat pengguna menggulir ke bawah.

Anda dapat menggunakan kode berikut untuk menambahkan tombol back-to-top.

impor Bereaksi, { useState, useEffect } dari 'reaksi';
fungsiStickyHeader() {
const [isSticky, setSticky] = useState(PALSU);
const [showBackToTop, setShowBackToTop] = useState(PALSU);
const handleScroll = () => {
const jendelaScrollTop = jendela.scrollY;
 jika (windowScrollTop > 10) {
 setLengket(BENAR);
 setShowBackToTop(BENAR);
 } kalau tidak {
 setLengket(PALSU);
 setShowBackToTop(PALSU);
 }
 };
const scrollToTop = () => {
jendela.scrollTo({
 atas: 0,
 perilaku: 'mulus'
 });
 };
 gunakanEfek(() => {
 jendela.addEventListener('menggulir', handleScroll);
kembali () => {
 window.removeEventListener('menggulir', handleScroll);
 };
 }, []);
const item = [
 {
 nama: 'Rumah',
 tautan: '/'
 },
 {
 nama: 'Tentang',
 tautan: '/about'
 },
 {
 nama: 'Kontak',
 tautan: '/contact'
 }
 ];
const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
kembali (
<div namakelas="Aplikasi">
<gaya tajuk={{ latar belakang: isSticky? '#fff': '', lebar: '100%', zIndeks: '999', posisi: Apakah Lengket ?'tetap':'mutlak' }}>
 {items.peta (item => (
<a href={item.link} key={item.name}>
 {nama barang}
</A>
 ))}
</header>
<ul>
 {data.peta((x) => {
 kembali (<li kunci={x}>{X}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<tombol onClick={scrollToTop}>Kembali ke atas</button>
 )}</div>
</div>
 );
}
eksporbawaan StickyHeader;

Kode ini membuat komponen tajuk lengket dan menatanya menggunakan CSS. Anda juga bisa gaya komponen menggunakan Tailwind CSS.

Metode Alternatif

Anda juga dapat menggunakan pustaka pihak ketiga untuk membuat tajuk tempel.

Menggunakan react-sticky

Library react-sticky membantu Anda membuat elemen sticky di React. Untuk menggunakan react-sticky, instal terlebih dahulu:

npm Install reaksi-lengket

Kemudian, Anda dapat menggunakannya seperti ini:

impor Reaksi dari 'reaksi';
impor { Wadah Lengket, Lengket } dari 'bereaksi-lengket';
fungsiAplikasi() {
const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
kembali (
<div>
<StickyContainer>
<Lengket>{({ gaya }) => (
<gaya tajuk={gaya}>
 Ini adalah tajuk yang lengket
</header>
 )}
</Sticky>
<ul>
 {data.peta((x) => {
 kembali (<li kunci={x}>{X}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
eksporbawaan Aplikasi;

Pada kode di atas, pertama-tama Anda perlu mengimpor komponen StickyContainer dan Sticky dari library react-sticky.

Kemudian, Anda perlu menambahkan komponen StickyContainer di sekitar konten yang harus berisi elemen sticky. Dalam hal ini, Anda ingin membuat tajuk lengket di dalam daftar yang mengikutinya, jadi tambahkan StickyContainer di sekitar keduanya.

Selanjutnya, tambahkan komponen Sticky di sekitar elemen yang ingin dibuat sticky. Dalam hal ini, itulah elemen tajuk.

Terakhir, tambahkan penyangga gaya ke komponen Lengket. Ini akan memposisikan tajuk dengan benar.

Menggunakan react-stickynode

React-stickynode adalah library lain yang membantu Anda membuat elemen lengket di React.

Untuk menggunakan react-stickynode, instal terlebih dahulu:

npm Install reaksi-stickynode

Kemudian Anda dapat menggunakannya seperti ini:

impor Reaksi dari 'reaksi';
impor Lengket dari 'bereaksi-stickynode';
fungsiAplikasi() {
const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
kembali (
<div>
<Sticky diaktifkan={true} bottomBoundary={1200}>
<div>
 Ini adalah tajuk yang lengket
</div>
</Sticky>
<ul>
 {data.peta((x) => {
 kembali (<li kunci={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
eksporbawaan Aplikasi;

Mulailah dengan mengimpor komponen Sticky dari pustaka react-stickynode.

Lalu, tambahkan komponen Sticky di sekitar elemen yang ingin dibuat lengket. Dalam hal ini, buat header sticky dengan menambahkan komponen Sticky di sekitarnya.

Terakhir, tambahkan alat peraga yang diaktifkan dan bottomBoundary ke komponen Sticky. Prop yang diaktifkan akan memastikan bahwa tajuknya lengket, dan prop bottomBoundary akan memastikan bahwa itu tidak terlalu jauh ke bawah halaman.

Tingkatkan Pengalaman Pengguna

Dengan tajuk yang lengket, pengguna dapat dengan mudah kehilangan jejak di mana mereka berada di halaman. Header lengket bisa menjadi masalah terutama pada perangkat seluler, di mana layarnya lebih kecil.

Untuk meningkatkan pengalaman pengguna, Anda juga dapat menambahkan tombol "kembali ke atas". Tombol seperti itu memungkinkan pengguna untuk menggulir kembali ke bagian atas halaman dengan cepat. Ini bisa sangat membantu pada halaman yang panjang.

Saat Anda siap, Anda dapat menerapkan aplikasi React Anda secara gratis di Halaman GitHub.