Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Nekatere zasnove spletnih mest uporabljajo glavo, ki se "prilepi" na vrh zaslona, ​​ko se pomikate navzdol. Glava, ki ostane vidna med pomikanjem, se pogosto imenuje lepljiva glava.

Na spletno mesto React lahko dodate lepljivo glavo tako, da sami napišete kodo po meri ali uporabite knjižnico tretje osebe.

Kaj je lepljiva glava?

Lepljiva glava je glava, ki ostane pritrjena na vrh zaslona, ​​ko se uporabnik pomika navzdol po strani. To je lahko koristno za ohranjanje vidnosti pomembnih informacij, ko se uporabnik pomika.

Upoštevajte pa, da palična glava zmanjša količino prostora na zaslonu za vaš preostali dizajn. Če uporabljate lepljivo glavo, je dobro, da ostane kratka.

Ustvarjanje lepljive glave

Prva stvar, ki jo boste morali narediti, je, da nastavite upravljalnik onscroll. Ta funkcija se bo zagnala vsakič, ko se uporabnik pomakne. To lahko storite tako, da objektu okna dodate poslušalca dogodkov onscroll in z

instagram viewer
z uporabo kavljev React. Če želite nastaviti obdelovalnik onscroll, morate uporabiti kljuko useEffect in metodo addEventListener objekta okna.

Naslednja koda ustvari komponento lepljive glave in jo oblikuje s pomočjo CSS.

uvoz Odziv, {useState, useEffect} od 'reagirati';
funkcijoStickyHeader() {
konst [isSticky, setSticky] = useState(lažno);
konst handleScroll = () => {
konst windowScrollTop = okno.scrollY;
 če (windowScrollTop > 10) {
 setSticky(prav);
 } drugače {
 setSticky(lažno);
 }
 };
 useEffect(() => {
 window.addEventListener('drsenje', handleScroll);
vrnitev () => {
 window.removeEventListener('drsenje', handleScroll);
 };
 }, []);
konst predmeti = [
 {
 ime: 'domov',
 povezava: '/'
 },
 {
 ime: 'O tem',
 povezava: '/about'
 },
 {
 ime: 'Kontakt',
 povezava: '/contact'
 }
 ];
konst podatki = [ 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 ]
vrnitev (
<div className="aplikacija">
<header style={{ background: isSticky? '#fff': '', premer: '100%', zIndex: '999',položaj: isSticky?'fiksno':'absolutno' }}>
 {items.map (item => (
<a href={item.link} key={item.name}>
 {ime izdelka}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 vrnitev (<tipka li={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
izvozprivzeto StickyHeader;

Ta metoda uporablja vgrajeno oblikovanje, vendar lahko uporabite tudi razrede CSS. Na primer:

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

Končna stran bo videti takole:

Dodatne lastnosti

Obstaja še nekaj drugih stvari, ki jih lahko naredite, da bo vaša lepljiva glava uporabniku prijaznejša. Dodate lahko na primer gumb nazaj na vrh ali naredite glavo pregledno, ko se uporabnik pomakne navzdol.

Za dodajanje gumba za vrnitev na vrh lahko uporabite naslednjo kodo.

uvoz Odziv, {useState, useEffect} od 'reagirati';
funkcijoStickyHeader() {
konst [isSticky, setSticky] = useState(lažno);
konst [showBackToTop, setShowBackToTop] = useState(lažno);
konst handleScroll = () => {
konst windowScrollTop = okno.scrollY;
 če (windowScrollTop > 10) {
 setSticky(prav);
 setShowBackToTop(prav);
 } drugače {
 setSticky(lažno);
 setShowBackToTop(lažno);
 }
 };
konst scrollToTop = () => {
okno.scrollTo({
 vrh: 0,
 obnašanje: 'gladka'
 });
 };
 useEffect(() => {
 window.addEventListener('drsenje', handleScroll);
vrnitev () => {
 window.removeEventListener('drsenje', handleScroll);
 };
 }, []);
konst predmeti = [
 {
 ime: 'domov',
 povezava: '/'
 },
 {
 ime: 'O tem',
 povezava: '/about'
 },
 {
 ime: 'Kontakt',
 povezava: '/contact'
 }
 ];
konst podatki = [ 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 ]
vrnitev (
<div className="aplikacija">
<header style={{ background: isSticky? '#fff': '', premer: '100%', zIndex: '999',položaj: isSticky?'fiksno':'absolutno' }}>
 {items.map (item => (
<a href={item.link} key={item.name}>
 {ime izdelka}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 vrnitev (<tipka li={x}>{x}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<gumb onClick={scrollToTop}>Nazaj na vrh</button>
 )}</div>
</div>
 );
}
izvozprivzeto StickyHeader;

Ta koda ustvari komponento lepljive glave in jo oblikuje s pomočjo CSS. Lahko tudi oblikujte komponento z uporabo Tailwind CSS.

Alternativne metode

Za ustvarjanje lepljive glave lahko uporabite tudi knjižnico drugega proizvajalca.

Uporaba react-stickyja

React-sticky knjižnica vam pomaga ustvariti lepljive elemente v Reactu. Če želite uporabiti react-sticky, ga najprej namestite:

npm namestite reagirati-lepljivo

Nato ga lahko uporabite takole:

uvoz Reagiraj od 'reagirati';
uvoz {StickyContainer, Sticky} od 'react-sticky';
funkcijoaplikacija() {
konst podatki = [ 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 ]
vrnitev (
<div>
<StickyContainer>
<Lepljivo>{({ slog}) => (
<slog glave={slog}>
 to je lepljivo glavo
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 vrnitev (<tipka li={x}>{x}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
izvozprivzeto aplikacija;

V zgornji kodi morate najprej uvoziti komponenti StickyContainer in Sticky iz knjižnice react-sticky.

Nato morate okoli vsebine, ki mora vsebovati lepljivi element, dodati komponento StickyContainer. V tem primeru želite, da je glava lepljiva na seznamu, ki ji sledi, zato dodajte StickyContainer okoli obeh.

Nato dodajte komponento Sticky okoli elementa, ki ga želite narediti lepljivega. V tem primeru je to element glave.

Nazadnje dodajte slogovno komponento Sticky. To bo pravilno postavilo glavo.

Uporaba react-stickynode

React-stickynode je še ena knjižnica, ki vam pomaga ustvariti lepljive elemente v Reactu.

Če želite uporabiti react-stickynode, ga najprej namestite:

npm namestite react-stickynode

Potem ga lahko uporabite takole:

uvoz Reagiraj od 'reagirati';
uvoz Lepljivo od 'react-stickynode';
funkcijoaplikacija() {
konst podatki = [ 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 ]
vrnitev (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
 to je lepljivo glavo
</div>
</Sticky>
<ul>
 {data.map((x) => {
 vrnitev (<tipka li={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
izvozprivzeto aplikacija;

Začnite z uvozom komponente Sticky iz knjižnice react-stickynode.

Nato okoli elementa, ki ga želite narediti lepljivega, dodajte komponento Sticky. V tem primeru naredite glavo lepljivo tako, da okoli nje dodate komponento Sticky.

Nazadnje dodajte omogočene in bottomBoundary rekvizite lepljivi komponenti. Omogočena podpora bo poskrbela, da bo glava lepljiva, podpora bottomBoundary pa bo zagotovila, da ne bo šla predaleč navzdol po strani.

Izboljšajte uporabniško izkušnjo

Z lepljivo glavo lahko uporabnik zlahka izgubi sled, kje na strani se nahaja. Lepljive glave so lahko še posebej problematične na mobilnih napravah, kjer je zaslon manjši.

Za izboljšanje uporabniške izkušnje lahko dodate tudi gumb »nazaj na vrh«. Takšen gumb omogoča uporabniku, da se hitro pomakne nazaj na vrh strani. To je lahko še posebej koristno pri dolgih straneh.

Ko boste pripravljeni, lahko svojo aplikacijo React brezplačno namestite na strani GitHub.