Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Neki dizajni web stranica koriste zaglavlje koje se "zalijepi" na vrh zaslona dok se pomičete prema dolje. Zaglavlje koje ostaje vidljivo dok se pomičete često se naziva ljepljivim zaglavljem.

Možete dodati ljepljivo zaglavlje na svoje React mjesto pisanjem prilagođenog koda sami ili korištenjem biblioteke treće strane.

Što je ljepljivo zaglavlje?

Ljepljivo zaglavlje je zaglavlje koje ostaje fiksirano na vrhu zaslona dok se korisnik pomiče niz stranicu. To može biti korisno za održavanje važnih informacija vidljivima dok se korisnik pomiče.

Međutim, imajte na umu da zaglavlje štapića smanjuje količinu prostora na zaslonu za vaš preostali dizajn. Ako koristite ljepljivo zaglavlje, bilo bi dobro da ono bude kratko.

Stvaranje ljepljivog zaglavlja

Prva stvar koju ćete morati učiniti je postaviti onscroll rukovatelj. Ova funkcija će se pokrenuti svaki put kada se korisnik pomiče. To možete učiniti dodavanjem slušatelja događaja onscroll objektu prozora i pomoću

instagram viewer
koristeći React kuke. Da biste postavili onscroll rukovatelj, morate koristiti useEffect hook i addEventListener metodu prozorskog objekta.

Sljedeći kod stvara komponentu ljepljivog zaglavlja i stilizira je pomoću CSS-a.

uvoz Reagiraj, {useState, useEffect} iz 'reagirati';
funkcijaLjepljivo zaglavlje() {
konst [isSticky, setSticky] = useState(lažno);
konst handleScroll = () => {
konst windowScrollTop = prozor.scrollY;
 ako (windowScrollTop > 10) {
 setSticky(pravi);
 } drugo {
 setSticky(lažno);
 }
 };
 useEffect(() => {
 window.addEventListener('svitak', handleScroll);
povratak () => {
 window.removeEventListener('svitak', handleScroll);
 };
 }, []);
konst stavke = [
 {
 Ime: 'Dom',
 veza: '/'
 },
 {
 Ime: 'Oko',
 veza: '/about'
 },
 {
 Ime: 'Kontakt',
 veza: '/contact'
 }
 ];
konst podaci = [ 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 ]
povratak (
<div className="aplikacija">
<stil zaglavlja={{ pozadina: isSticky? '#F F F': '', širina: '100%', zIndex: '999',pozicija: isSticky?'fiksni':'apsolutni' }}>
 {items.map (stavka => (
<a href={item.link} key={item.name}>
 {ime proizvoda}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 povratak (<li ključ={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
izvozzadano StickyHeader;

Ova metoda koristi ugrađeni stil, ali također možete koristiti CSS klase. Na primjer:

.ljepljiv {
 položaj: fiksni;
 vrh: 0;
 širina: 100%;
 z-indeks: 999;
}

Rezultirajuća stranica će izgledati ovako:

Dodatne mogućnosti

Postoji još nekoliko stvari koje možete učiniti kako biste svoje ljepljivo zaglavlje učinili lakšim za korištenje. Na primjer, možete dodati gumb za povratak na vrh ili učiniti zaglavlje prozirnim kada se korisnik pomiče prema dolje.

Možete upotrijebiti sljedeći kôd za dodavanje gumba za povratak na vrh.

uvoz Reagiraj, {useState, useEffect} iz 'reagirati';
funkcijaLjepljivo zaglavlje() {
konst [isSticky, setSticky] = useState(lažno);
konst [showBackToTop, setShowBackToTop] = useState(lažno);
konst handleScroll = () => {
konst windowScrollTop = prozor.scrollY;
 ako (windowScrollTop > 10) {
 setSticky(pravi);
 setShowBackToTop(pravi);
 } drugo {
 setSticky(lažno);
 setShowBackToTop(lažno);
 }
 };
konst scrollToTop = () => {
prozor.scrollTo({
 gore: 0,
 ponašanje: 'glatko, nesmetano'
 });
 };
 useEffect(() => {
 window.addEventListener('svitak', handleScroll);
povratak () => {
 window.removeEventListener('svitak', handleScroll);
 };
 }, []);
konst stavke = [
 {
 Ime: 'Dom',
 veza: '/'
 },
 {
 Ime: 'Oko',
 veza: '/about'
 },
 {
 Ime: 'Kontakt',
 veza: '/contact'
 }
 ];
konst podaci = [ 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 ]
povratak (
<div className="aplikacija">
<stil zaglavlja={{ pozadina: isSticky? '#F F F': '', širina: '100%', zIndex: '999',pozicija: isSticky?'fiksni':'apsolutni' }}>
 {items.map (stavka => (
<a href={item.link} key={item.name}>
 {ime proizvoda}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 povratak (<li ključ={x}>{x}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<gumb onClick={scrollToTop}>Povratak na vrh</button>
 )}</div>
</div>
 );
}
izvozzadano StickyHeader;

Ovaj kod stvara ljepljivu komponentu zaglavlja i stilizira je pomoću CSS-a. Također možete stilizirajte komponentu koristeći Tailwind CSS.

Alternativne metode

Također možete koristiti biblioteku treće strane za stvaranje ljepljivog zaglavlja.

Korištenje react-stickyja

React-sticky biblioteka pomaže vam u stvaranju ljepljivih elemenata u Reactu. Da biste koristili react-sticky, prvo ga instalirajte:

npm instalirati reagirati-ljepljivo

Zatim ga možete koristiti ovako:

uvoz Reagirati iz 'reagirati';
uvoz {ljepljivi spremnik, ljepljivi} iz 'reagirati-ljepljivo';
funkcijaaplikacija() {
konst podaci = [ 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 ]
povratak (
<div>
<Ljepljivi spremnik>
<Ljepljiv>{({ stil }) => (
<stil zaglavlja={style}>
 Ovaj je ljepljivo zaglavlje
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 povratak (<li ključ={x}>{x}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
izvozzadano aplikacija;

U gornjem kodu prvo morate uvesti komponente StickyContainer i Sticky iz react-sticky biblioteke.

Zatim trebate dodati komponentu StickyContainer oko sadržaja koji bi trebao sadržavati ljepljivi element. U ovom slučaju, želite učiniti zaglavlje ljepljivim unutar popisa koji ga slijedi, pa dodajte StickyContainer oko ta dva.

Zatim dodajte Sticky komponentu oko elementa koji želite učiniti ljepljivim. U ovom slučaju, to je element zaglavlja.

Na kraju, dodajte stilski dodatak ljepljivoj komponenti. Ovo će ispravno postaviti zaglavlje.

Korištenje react-stickynode

React-stickynode je još jedna biblioteka koja vam pomaže stvoriti ljepljive elemente u Reactu.

Da biste koristili react-stickynode, prvo ga instalirajte:

npm instalirati reagirati-ljepljivi čvor

Zatim ga možete koristiti ovako:

uvoz Reagirati iz 'reagirati';
uvoz Ljepljiv iz 'react-stickynode';
funkcijaaplikacija() {
konst podaci = [ 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 ]
povratak (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
 Ovaj je ljepljivo zaglavlje
</div>
</Sticky>
<ul>
 {data.map((x) => {
 povratak (<li ključ={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
izvozzadano aplikacija;

Započnite uvozom Sticky komponente iz biblioteke react-stickynode.

Zatim dodajte ljepljivu komponentu oko elementa koji želite učiniti ljepljivim. U tom slučaju, učinite zaglavlje ljepljivim dodavanjem komponente Sticky oko njega.

Na kraju dodajte omogućene i bottomBoundary rekvizite u Sticky komponentu. Omogućeni prop pobrinut će se da zaglavlje bude ljepljivo, a bottomBoundary prop će osigurati da ne ide predaleko niz stranicu.

Poboljšajte korisničko iskustvo

S ljepljivim zaglavljem, korisnik može lako izgubiti pojam o tome gdje se nalazi na stranici. Ljepljiva zaglavlja mogu biti posebno problematična na mobilnim uređajima, gdje je zaslon manji.

Kako biste poboljšali korisničko iskustvo, također možete dodati gumb "natrag na vrh". Takav gumb omogućuje korisniku da se brzo pomakne natrag na vrh stranice. Ovo može biti posebno korisno na dugim stranicama.

Kada budete spremni, možete besplatno implementirati svoju aplikaciju React na GitHub stranicama.