Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Některé návrhy webových stránek využívají záhlaví, které se při posouvání dolů „přilepí“ k horní části obrazovky. Záhlaví, které zůstává viditelné při posouvání, se často nazývá lepicí záhlaví.

Na svůj web React můžete přidat lepící záhlaví tak, že si napíšete vlastní kód nebo použijete knihovnu třetí strany.

Co je lepkavá hlavička?

Lepící záhlaví je záhlaví, které zůstává připevněno k horní části obrazovky, když uživatel posouvá stránku dolů. To může být užitečné pro zachování viditelnosti důležitých informací při posouvání uživatele.

Mějte však na paměti, že hlavička tyče snižuje množství plochy obrazovky pro váš zbývající návrh. Pokud používáte lepící hlavičku, je dobré, aby byla krátká.

Vytvoření Sticky Header

První věc, kterou budete muset udělat, je nastavit obslužný program onscroll. Tato funkce se spustí pokaždé, když uživatel roluje. Můžete to provést přidáním posluchače událostí onscroll do objektu okna a pomocí

instagram viewer
pomocí háčků React. Chcete-li nastavit obslužnou rutinu onscroll, musíte použít háček useEffect a metodu addEventListener objektu okna.

Následující kód vytvoří komponentu sticky header a nastyluje ji pomocí CSS.

import Reagovat, { useState, useEffect } z 'reagovat';
funkceStickyHeader() {
konst [isSticky, setSticky] = useState(Nepravdivé);
konst handleScroll = () => {
konst windowScrollTop = okno.scrollY;
 if (windowScrollTop > 10) {
 setSticky(skutečný);
 } jiný {
 setSticky(Nepravdivé);
 }
 };
 useEffect(() => {
 window.addEventListener('svitek', handleScroll);
vrátit se () => {
 window.removeEventListener('svitek', handleScroll);
 };
 }, []);
konst položky = [
 {
 název: 'Domov',
 odkaz: '/'
 },
 {
 název: 'O',
 odkaz: '/about'
 },
 {
 název: 'Kontakt',
 odkaz: '/contact'
 }
 ];
konst 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 ]
vrátit se (
<div název_třídy="Aplikace">
<styl záhlaví={{ pozadí: isSticky? '#fff': '', šířka: '100%', zIndex: '999',pozice: isSticky ?'pevný':'absolutní' }}>
 {items.map (item => (
<a href={item.link} key={item.name}>
 {název položky}
</A>
 ))}
</header>
<ul>
 {data.map((x) => {
 vrátit se (<li klíč={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
vývoznívýchozí StickyHeader;

Tato metoda využívá inline styling, ale můžete použít i třídy CSS. Například:

.lepkavý {
 poloha: pevná;
 nahoře: 0;
 šířka: 100 %;
 z-index: 999;
}

Výsledná stránka bude vypadat takto:

Další funkce

Existuje několik dalších věcí, které můžete udělat, aby byla vaše lepicí hlavička uživatelsky přívětivější. Můžete například přidat tlačítko zpět na začátek nebo zprůhlednit záhlaví, když uživatel posouvá dolů.

Pomocí následujícího kódu můžete přidat tlačítko zpět na začátek.

import Reagovat, { useState, useEffect } z 'reagovat';
funkceStickyHeader() {
konst [isSticky, setSticky] = useState(Nepravdivé);
konst [showBackToTop, setShowBackToTop] = useState(Nepravdivé);
konst handleScroll = () => {
konst windowScrollTop = okno.scrollY;
 if (windowScrollTop > 10) {
 setSticky(skutečný);
 setShowBackToTop(skutečný);
 } jiný {
 setSticky(Nepravdivé);
 setShowBackToTop(Nepravdivé);
 }
 };
konst scrollToTop = () => {
okno.scrollTo({
 nahoře: 0,
 chování: 'hladký'
 });
 };
 useEffect(() => {
 window.addEventListener('svitek', handleScroll);
vrátit se () => {
 window.removeEventListener('svitek', handleScroll);
 };
 }, []);
konst položky = [
 {
 název: 'Domov',
 odkaz: '/'
 },
 {
 název: 'O',
 odkaz: '/about'
 },
 {
 název: 'Kontakt',
 odkaz: '/contact'
 }
 ];
konst 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 ]
vrátit se (
<div název_třídy="Aplikace">
<styl záhlaví={{ pozadí: isSticky? '#fff': '', šířka: '100%', zIndex: '999',pozice: isSticky ?'pevný':'absolutní' }}>
 {items.map (item => (
<a href={item.link} key={item.name}>
 {název položky}
</A>
 ))}
</header>
<ul>
 {data.map((x) => {
 vrátit se (<li klíč={x}>{X}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<button onClick={scrollToTop}>Zpět na začátek</button>
 )}</div>
</div>
 );
}
vývoznívýchozí StickyHeader;

Tento kód vytvoří komponentu sticky header a stylizuje ji pomocí CSS. Můžete také styl komponenty pomocí Tailwind CSS.

Alternativní metody

K vytvoření lepivého záhlaví můžete také použít knihovnu třetí strany.

Použití Reagovat lepkavý

React-sticky knihovna vám pomůže vytvořit lepkavé prvky v Reactu. Chcete-li použít reagovat-stick, nejprve jej nainstalujte:

npm Nainstalujte reagovat-lepkavý

Pak jej můžete použít takto:

import Reagovat z 'reagovat';
import { StickyContainer, Sticky } z 'react-sticky';
funkceAplikace() {
konst 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 ]
vrátit se (
<div>
<StickyContainer>
<Lepkavý>{({ styl }) => (
<styl záhlaví={style}>
 Tento je lepkavá hlavička
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 vrátit se (<li klíč={x}>{X}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
vývoznívýchozí Aplikace;

Ve výše uvedeném kódu musíte nejprve importovat komponenty StickyContainer a Sticky z knihovny respond-stick.

Poté musíte přidat komponentu StickyContainer kolem obsahu, který by měl obsahovat prvek sticky. V tomto případě chcete, aby záhlaví bylo v seznamu, který za ním následuje, přilepené, takže přidejte StickyContainer kolem těchto dvou.

Dále přidejte komponentu Sticky kolem prvku, který chcete vytvořit lepivým. V tomto případě je to prvek záhlaví.

Nakonec přidejte ke komponentě Sticky rekvizitu stylu. Tím se záhlaví umístí správně.

Použití Reag-Stickynode

React-stickynode je další knihovna, která vám pomáhá vytvářet lepivé prvky v Reactu.

Chcete-li použít respond-stickynode, nejprve jej nainstalujte:

npm Nainstalujte reagovat-stickynode

Pak to můžete použít takto:

import Reagovat z 'reagovat';
import Lepkavý z 'react-stickynode';
funkceAplikace() {
konst 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 ]
vrátit se (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
 Tento je lepkavá hlavička
</div>
</Sticky>
<ul>
 {data.map((x) => {
 vrátit se (<li klíč={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
vývoznívýchozí Aplikace;

Začněte importem komponenty Sticky z knihovny respond-stickynode.

Poté přidejte komponentu Sticky kolem prvku, který chcete vytvořit lepivým. V tomto případě udělejte hlavičku lepivou přidáním komponenty Sticky kolem ní.

Nakonec přidejte do komponenty Sticky rekvizity enabled a bottomBoundary. Povolená podpěra se postará o to, aby hlavička byla lepkavá, a podpěra bottomBoundary zajistí, že nebude na stránce příliš daleko.

Zlepšení uživatelské zkušenosti

Díky lepivému záhlaví může být pro uživatele snadné ztratit přehled o tom, kde se na stránce nachází. Nalepovací hlavičky mohou být problematické zejména na mobilních zařízeních, kde je obrazovka menší.

Chcete-li zlepšit uživatelský dojem, můžete také přidat tlačítko „zpět na začátek“. Takové tlačítko umožňuje uživateli rychlý posun zpět na začátek stránky. To může být užitečné zejména na dlouhých stránkách.

Až budete připraveni, můžete svou aplikaci React nasadit zdarma na GitHub Pages.