Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Unele modele de site-uri web folosesc un antet care „se lipește” în partea de sus a ecranului în timp ce derulați în jos. Un antet care rămâne vizibil pe măsură ce derulați este adesea numit antet lipicios.

Puteți adăuga un antet lipicios pe site-ul dvs. React scriind singur cod personalizat sau utilizând o bibliotecă terță parte.

Ce este un antet lipicios?

Un antet lipicios este un antet care rămâne fixat în partea de sus a ecranului pe măsură ce utilizatorul derulează în jos pe pagină. Acest lucru poate fi util pentru a menține informațiile importante vizibile pe măsură ce utilizatorul derulează.

Țineți minte, totuși, că un antet stick reduce cantitatea de spațiu pe ecran pentru designul rămas. Dacă utilizați un antet lipicios, este o idee bună să-l păstrați scurt.

Crearea unui antet lipicios

Primul lucru pe care va trebui să-l faceți este să configurați un handler de derulare. Această funcție va rula de fiecare dată când utilizatorul derulează. Puteți face acest lucru adăugând un ascultător de evenimente onscroll la obiectul fereastră și prin

instagram viewer
folosind cârlige React. Pentru a configura handlerul onscroll, trebuie să utilizați cârligul useEffect și metoda addEventListener a obiectului fereastră.

Următorul cod creează o componentă de antet lipicioasă și o stilează folosind CSS.

import Reacționează, { useState, useEffect } din 'reacţiona';
funcţieStickyHeader() {
const [isSticky, setSticky] = useState(fals);
const handleScroll = () => {
const windowScrollTop = fereastră.scrollY;
 dacă (windowScrollTop > 10) {
 setSticky(Adevărat);
 } altfel {
 setSticky(fals);
 }
 };
 useEffect(() => {
 window.addEventListener('sul', handleScroll);
întoarcere () => {
 window.removeEventListener('sul', handleScroll);
 };
 }, []);
const articole = [
 {
 Nume: 'Acasă',
 legătură: '/'
 },
 {
 Nume: 'Despre',
 legătură: '/about'
 },
 {
 Nume: 'a lua legatura',
 legătură: '/contact'
 }
 ];
const date = [ 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 ]
întoarcere (
<div className="App">
<stil antet={{ fundal: isSticky? '#fff': '', latime: '100%', zIndex: '999',poziție: isSticky ?'fix':'absolut' }}>
 {items.map (articol => (
<a href={item.link} cheie={item.name}>
 {item.name}
</A>
 ))}
</header>
<ul>
 {date.map((x) => {
 întoarcere (<cheie li={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
exportMod implicit StickyHeader;

Această metodă folosește stilul inline, dar puteți folosi și clase CSS. De exemplu:

.lipicios {
 poziție: fixă;
 sus: 0;
 latime: 100%;
 indicele z: 999;
}

Pagina rezultată va arăta astfel:

Caracteristici suplimentare

Există alte câteva lucruri pe care le puteți face pentru a face antetul lipicios mai ușor de utilizat. De exemplu, puteți adăuga un buton înapoi în sus sau puteți face antetul transparent atunci când utilizatorul derulează în jos.

Puteți folosi următorul cod pentru a adăuga un buton de sus.

import Reacționează, { useState, useEffect } din 'reacţiona';
funcţieStickyHeader() {
const [isSticky, setSticky] = useState(fals);
const [showBackToTop, setShowBackToTop] = useState(fals);
const handleScroll = () => {
const windowScrollTop = fereastră.scrollY;
 dacă (windowScrollTop > 10) {
 setSticky(Adevărat);
 setShowBackToTop(Adevărat);
 } altfel {
 setSticky(fals);
 setShowBackToTop(fals);
 }
 };
const scrollToTop = () => {
fereastră.scrollTo({
 sus: 0,
 comportament: 'neted'
 });
 };
 useEffect(() => {
 window.addEventListener('sul', handleScroll);
întoarcere () => {
 window.removeEventListener('sul', handleScroll);
 };
 }, []);
const articole = [
 {
 Nume: 'Acasă',
 legătură: '/'
 },
 {
 Nume: 'Despre',
 legătură: '/about'
 },
 {
 Nume: 'a lua legatura',
 legătură: '/contact'
 }
 ];
const date = [ 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 ]
întoarcere (
<div className="App">
<stil antet={{ fundal: isSticky? '#fff': '', latime: '100%', zIndex: '999',poziție: isSticky ?'fix':'absolut' }}>
 {items.map (articol => (
<a href={item.link} cheie={item.name}>
 {item.name}
</A>
 ))}
</header>
<ul>
 {date.map((x) => {
 întoarcere (<cheie li={x}>{X}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<butonul onClick={scrollToTop}>Inapoi sus</button>
 )}</div>
</div>
 );
}
exportMod implicit StickyHeader;

Acest cod creează o componentă de antet lipicioasă și o stilează folosind CSS. Poti de asemenea stilați componenta folosind Tailwind CSS.

Metode alternative

De asemenea, puteți utiliza o bibliotecă terță parte pentru a crea un antet lipicios.

Folosind react-sticky

Biblioteca react-sticky vă ajută să creați elemente lipicioase în React. Pentru a utiliza react-sticky, mai întâi instalați-l:

npm instalare reacţionează-lipicios

Apoi, îl puteți folosi astfel:

import Reacţiona din 'reacţiona';
import { StickyContainer, Sticky } din „reacționează-lipicios”;
funcţieApp() {
const date = [ 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 ]
întoarcere (
<div>
<StickyContainer>
<Lipicios>{({ stil }) => (
<stil antet={stil}>
 Acest este un antet lipicios
</header>
 )}
</Sticky>
<ul>
 {date.map((x) => {
 întoarcere (<cheie li={x}>{X}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
exportMod implicit Aplicație;

În codul de mai sus, mai întâi trebuie să importați componentele StickyContainer și Sticky din biblioteca react-sticky.

Apoi, trebuie să adăugați componenta StickyContainer în jurul conținutului care ar trebui să conțină elementul lipicios. În acest caz, doriți să faceți antetul lipicios în lista care îl urmează, așa că adăugați StickyContainer în jurul celor două.

Apoi, adăugați componenta Sticky în jurul elementului pe care doriți să îl faceți lipicios. În acest caz, acesta este elementul antet.

În cele din urmă, adăugați o recuzită de stil la componenta Sticky. Acest lucru va poziționa corect antetul.

Folosind react-stickynode

React-stickynode este o altă bibliotecă care vă ajută să creați elemente lipicioase în React.

Pentru a utiliza react-stickynode, mai întâi instalați-l:

npm instalare react-stickynode

Apoi îl puteți folosi astfel:

import Reacţiona din 'reacţiona';
import Lipicios din „react-stickynode”;
funcţieApp() {
const date = [ 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 ]
întoarcere (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
 Acest este un antet lipicios
</div>
</Sticky>
<ul>
 {date.map((x) => {
 întoarcere (<cheie li={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
exportMod implicit Aplicație;

Începeți prin a importa componenta Sticky din biblioteca react-stickynode.

Apoi, adăugați componenta Sticky în jurul elementului pe care doriți să îl faceți lipicios. În acest caz, faceți antetul lipicios adăugând componenta Sticky în jurul lui.

În cele din urmă, adăugați elementele de recuzită activate și bottomBoundary la componenta Sticky. Elementul de reclamă activat se va asigura că antetul este lipicios, iar elementul de reclamă bottomBoundary se va asigura că nu merge prea departe pe pagină.

Îmbunătățiți experiența utilizatorului

Cu un antet lipicios, utilizatorului poate fi ușor să piardă evidența unde se află pe pagină. Antetele lipicioase pot fi deosebit de problematice pe dispozitivele mobile, unde ecranul este mai mic.

Pentru a îmbunătăți experiența utilizatorului, puteți adăuga și un buton „înapoi în sus”. Un astfel de buton permite utilizatorului să deruleze rapid înapoi în partea de sus a paginii. Acest lucru poate fi util în special în paginile lungi.

Când sunteți gata, puteți implementa gratuit aplicația React pe Paginile GitHub.