Home-theater-designers
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.
GUNAKAN VIDEO HARI INI
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.
import React, { useState, useEffect } from 'react';
function StickyHeader() {
const [isSticky, setSticky] = useState(false);
const handleScroll = () => {
const windowScrollTop = window.scrollY;
if (windowScrollTop > 10) {
setSticky(true);
} else {
setSticky(false);
}
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
const items = [
{
name: 'Home',
link: '/'
},
{
name: 'About',
link: '/about'
},
{
name: 'Contact',
link: '/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 ]
return (
<div className="App">
<header style={{ background: isSticky ? '#fff' : '', width: '100%', zIndex: '999',position:isSticky ?'fixed':'absolute' }}>
{items.map(item => (
<a href={item.link} key={item.name}>
{item.name}
</a>
))}
</header>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
</div>
);
}
export default StickyHeader;Metode ini menggunakan gaya inline, tetapi Anda juga dapat menggunakan kelas CSS. Sebagai contoh:
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 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.
import React, { useState, useEffect } from 'react';
function StickyHeader() {
const [isSticky, setSticky] = useState(false);
const [showBackToTop, setShowBackToTop] = useState(false);
const handleScroll = () => {
const windowScrollTop = window.scrollY;
if (windowScrollTop > 10) {
setSticky(true);
setShowBackToTop(true);
} else {
setSticky(false);
setShowBackToTop(false);
}
};
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
const items = [
{
name: 'Home',
link: '/'
},
{
name: 'About',
link: '/about'
},
{
name: 'Contact',
link: '/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 ]
return (
<div className="App">
<header style={{ background: isSticky ? '#fff' : '', width: '100%', zIndex: '999',position:isSticky ?'fixed':'absolute' }}>
{items.map(item => (
<a href={item.link} key={item.name}>
{item.name}
</a>
))}
</header>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
<div>
{showBackToTop && (
<button onClick={scrollToTop}>Back to top</button>
)}</div>
</div>
);
}
export default 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.
cara menonaktifkan startup cepat windows 10
Menggunakan react-sticky
Library react-sticky membantu Anda membuat elemen sticky di React. Untuk menggunakan react-sticky, instal terlebih dahulu:
npm install react-stickyKemudian, Anda dapat menggunakannya seperti ini:
import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';
function App() {
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 ]
return (
<div>
<StickyContainer>
<Sticky>{({ style }) => (
<header style={style}>
This is a sticky header
</header>
)}
</Sticky>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
</StickyContainer>
</div>
);
}
export default App;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 lengket. 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 react-stickynodeKemudian Anda dapat menggunakannya seperti ini:
import React from 'react';
import Sticky from 'react-stickynode';
function App() {
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 ]
return (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
This is a sticky header
</div>
</Sticky>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
</div>
);
}
export default App;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.
cara memasang iso di usb
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.