Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Niektoré návrhy webových stránok využívajú hlavičku, ktorá sa pri posúvaní nadol „prilepí“ k hornej časti obrazovky. Hlavička, ktorá zostáva pri posúvaní viditeľná, sa často nazýva lepiaca hlavička.

Na svoju stránku React môžete pridať lepiacu hlavičku napísaním vlastného kódu sami alebo pomocou knižnice tretej strany.

Čo je lepkavá hlavička?

Lepiaca hlavička je hlavička, ktorá zostáva pripevnená k hornej časti obrazovky, keď používateľ posúva stránku nadol. To môže byť užitočné, ak chcete, aby boli dôležité informácie viditeľné, keď používateľ roluje.

Majte však na pamäti, že hlavička tyče znižuje množstvo plochy obrazovky pre váš zostávajúci dizajn. Ak používate lepiacu hlavičku, je dobré, aby bola krátka.

Vytvorenie lepiacej hlavičky

Prvá vec, ktorú musíte urobiť, je nastaviť onscroll handler. Táto funkcia sa spustí vždy, keď používateľ roluje. Môžete to urobiť pridaním prijímača udalostí onscroll do objektu okna a pomocou

instagram viewer
pomocou háčikov React. Ak chcete nastaviť obslužný program onscroll, musíte použiť hák useEffect a metódu addEventListener objektu okna.

Nasledujúci kód vytvorí komponent s lepiacou hlavičkou a upraví ho pomocou CSS.

importovať Reaguj, { useState, useEffect } od 'reagovať';
funkciuStickyHeader() {
konšt [isSticky, setSticky] = useState(falošný);
konšt handleScroll = () => {
konšt windowScrollTop = okno.scrollY;
 if (windowScrollTop > 10) {
 setSticky(pravda);
 } inak {
 setSticky(falošný);
 }
 };
 useEffect(() => {
 window.addEventListener('rolovať', handleScroll);
vrátiť () => {
 window.removeEventListener('rolovať', handleScroll);
 };
 }, []);
konšt položky = [
 {
 názov: 'Domov',
 odkaz: '/'
 },
 {
 názov: 'O',
 odkaz: '/about'
 },
 {
 názov: 'Kontakt',
 odkaz: '/contact'
 }
 ];
konšt údaje = [ 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 ]
vrátiť (
<div názov triedy="App">
<štýl hlavičky={{ pozadie: isSticky? '#fff': '', šírka: '100%', zIndex: '999',pozícia: isSticky ?'pevné':'absolútne' }}>
 {items.map (item => (
<a href={item.link} key={item.name}>
 {názov položky}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 vrátiť (<li key={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
exportpredvolená StickyHeader;

Táto metóda používa vložený štýl, ale môžete použiť aj triedy CSS. Napríklad:

.lepkavý {
 poloha: pevná;
 hore: 0;
 šírka: 100 %;
 z-index: 999;
}

Výsledná stránka bude vyzerať takto:

Pridané vlastnosti

Existuje niekoľko ďalších vecí, ktoré môžete urobiť, aby bola vaša lepiaca hlavička užívateľsky príjemnejšia. Môžete napríklad pridať tlačidlo späť na začiatok alebo spriehľadniť hlavičku, keď sa používateľ posúva nadol.

Na pridanie tlačidla späť na začiatok môžete použiť nasledujúci kód.

importovať Reaguj, { useState, useEffect } od 'reagovať';
funkciuStickyHeader() {
konšt [isSticky, setSticky] = useState(falošný);
konšt [showBackToTop, setShowBackToTop] = useState(falošný);
konšt handleScroll = () => {
konšt windowScrollTop = okno.scrollY;
 if (windowScrollTop > 10) {
 setSticky(pravda);
 setShowBackToTop(pravda);
 } inak {
 setSticky(falošný);
 setShowBackToTop(falošný);
 }
 };
konšt scrollToTop = () => {
okno.scrollTo({
 hore: 0,
 správanie: 'hladké'
 });
 };
 useEffect(() => {
 window.addEventListener('rolovať', handleScroll);
vrátiť () => {
 window.removeEventListener('rolovať', handleScroll);
 };
 }, []);
konšt položky = [
 {
 názov: 'Domov',
 odkaz: '/'
 },
 {
 názov: 'O',
 odkaz: '/about'
 },
 {
 názov: 'Kontakt',
 odkaz: '/contact'
 }
 ];
konšt údaje = [ 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 ]
vrátiť (
<div názov triedy="App">
<štýl hlavičky={{ pozadie: isSticky? '#fff': '', šírka: '100%', zIndex: '999',pozícia: isSticky ?'pevné':'absolútne' }}>
 {items.map (item => (
<a href={item.link} key={item.name}>
 {názov položky}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 vrátiť (<li key={x}>{X}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<button onClick={scrollToTop}>Späť na začiatok</button>
 )}</div>
</div>
 );
}
exportpredvolená StickyHeader;

Tento kód vytvorí komponent s lepiacou hlavičkou a upraví ho pomocou CSS. Môžete tiež štýl komponentu pomocou Tailwind CSS.

Alternatívne metódy

Na vytvorenie lepiacej hlavičky môžete použiť aj knižnicu tretej strany.

Použitie reakčnej lepivej

Knižnica reakčných lepivých prvkov vám pomáha vytvárať lepivé prvky v aplikácii React. Ak chcete použiť funkciu Reag-stick, najprv ju nainštalujte:

npm Inštalácia reagovať-lepkavý

Potom ho môžete použiť takto:

importovať Reagovať od 'reagovať';
importovať { StickyContainer, Sticky } od 'react-sticky';
funkciuApp() {
konšt údaje = [ 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 ]
vrátiť (
<div>
<StickyContainer>
<Lepkavý>{({ štýl }) => (
<štýl hlavičky={style}>
 Toto je lepkavá hlavička
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 vrátiť (<li key={x}>{X}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
exportpredvolená App;

Vo vyššie uvedenom kóde musíte najskôr importovať komponenty StickyContainer a Sticky z knižnice respond-stick.

Potom musíte okolo obsahu pridať komponent StickyContainer, ktorý by mal obsahovať prvok Sticky. V tomto prípade chcete, aby hlavička bola lepkavá v zozname, ktorý za ňou nasleduje, takže okolo nich pridajte StickyContainer.

Potom pridajte komponent Sticky okolo prvku, ktorý chcete urobiť lepivým. V tomto prípade je to prvok hlavičky.

Nakoniec pridajte ku komponentu Sticky rekvizitu štýlu. Tým sa hlavička umiestni správne.

Pomocou reakčného uzla

React-stickynode je ďalšia knižnica, ktorá vám pomáha vytvárať lepivé prvky v Reacte.

Ak chcete použiť response-stickynode, najskôr ho nainštalujte:

npm Inštalácia reagovať-stickynode

Potom ho môžete použiť takto:

importovať Reagovať od 'reagovať';
importovať Lepkavý od 'react-stickynode';
funkciuApp() {
konšt údaje = [ 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 ]
vrátiť (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
 Toto je lepkavá hlavička
</div>
</Sticky>
<ul>
 {data.map((x) => {
 vrátiť (<li key={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
exportpredvolená App;

Začnite importovaním komponentu Sticky z knižnice respond-stickynode.

Potom pridajte komponent Sticky okolo prvku, ktorý chcete urobiť lepivým. V tomto prípade urobte hlavičku lepiacou pridaním komponentu Sticky okolo nej.

Nakoniec pridajte rekvizity enabled a bottomBoundary do komponentu Sticky. Povolená podpera sa postará o to, aby hlavička bola lepkavá, a podpera bottomBoundary zaistí, aby nezachádzala po stránke príliš ďaleko.

Zlepšite používateľskú skúsenosť

Vďaka lepivej hlavičke môže byť pre používateľa ľahké stratiť prehľad o tom, kde sa na stránke nachádza. Nalepovacie hlavičky môžu byť problematické najmä na mobilných zariadeniach, kde je obrazovka menšia.

Na zlepšenie používateľského zážitku môžete pridať aj tlačidlo „späť na začiatok“. Takéto tlačidlo umožňuje používateľovi rýchlo prejsť späť na začiatok stránky. To môže byť užitočné najmä pri dlhých stranách.

Keď budete pripravení, môžete svoju aplikáciu React bezplatne nasadiť na stránky GitHub.