I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Alcuni progetti di siti Web utilizzano un'intestazione che "si attacca" alla parte superiore dello schermo mentre scorri verso il basso. Un'intestazione che rimane visibile mentre scorri è spesso chiamata intestazione adesiva.

Puoi aggiungere un'intestazione adesiva al tuo sito React scrivendo tu stesso un codice personalizzato o utilizzando una libreria di terze parti.

Cos'è un'intestazione adesiva?

Un'intestazione adesiva è un'intestazione che rimane fissa nella parte superiore dello schermo mentre l'utente scorre la pagina verso il basso. Questo può essere utile per mantenere visibili informazioni importanti mentre l'utente scorre.

Tieni presente, tuttavia, che un'intestazione stick riduce la quantità di spazio sullo schermo per il tuo progetto rimanente. Se usi un'intestazione adesiva, è una buona idea mantenerla breve.

instagram viewer

Creazione di un'intestazione adesiva

La prima cosa che devi fare è impostare un gestore onscroll. Questa funzione verrà eseguita ogni volta che l'utente scorre. Puoi farlo aggiungendo un listener di eventi onscroll all'oggetto window e tramite utilizzando i ganci React. Per impostare il gestore onscroll, è necessario utilizzare l'hook useEffect e il metodo addEventListener dell'oggetto window.

Il codice seguente crea un componente di intestazione adesiva e lo stilizza utilizzando i CSS.

importare Reagire, {useState, useEffect} da 'reagire';
funzioneStickyHeader() {
cost [isSticky, setSticky] = useState(falso);
cost manigliaScroll = () => {
cost finestraScrollTop = finestra.scrollY;
 if (windowScrollTop > 10) {
 impostaSticky(VERO);
 } altro {
 impostaSticky(falso);
 }
 };
 usaEffetto(() => {
 window.addEventListener('scorrere', handleScroll);
ritorno () => {
 window.removeEventListener('scorrere', handleScroll);
 };
 }, []);
cost elementi = [
 {
 nome: 'Casa',
 collegamento: '/'
 },
 {
 nome: 'Di',
 collegamento: '/about'
 },
 {
 nome: 'Contatto',
 collegamento: '/contact'
 }
 ];
cost dati = [ 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 ]
ritorno (
<nomeclasse div="App">
<stile intestazione={{ background: isSticky? '#F F F': '', larghezza: '100%', zIndice: '999',posizione: isSticky ?'fisso':'assoluto' }}>
 {articoli.mappa (articolo => (
<a href={item.link} chiave={item.name}>
 {Nome dell'elemento}
</UN>
 ))}
</header>
<Ul>
 {dati.mappa((x) => {
 ritorno (<li chiave={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
esportarepredefinito StickyHeader;

Questo metodo utilizza lo stile in linea, ma puoi anche utilizzare le classi CSS. Per esempio:

.appiccicoso {
 posizione: fissa;
 alto: 0;
 larghezza: 100%;
 indice z: 999;
}

La pagina risultante sarà simile a questa:

Caratteristiche aggiuntive

Ci sono alcune altre cose che puoi fare per rendere la tua intestazione adesiva più user-friendly. Ad esempio, puoi aggiungere un pulsante Torna all'inizio o rendere trasparente l'intestazione quando l'utente scorre verso il basso.

È possibile utilizzare il codice seguente per aggiungere un pulsante Torna all'inizio.

importare Reagire, {useState, useEffect} da 'reagire';
funzioneStickyHeader() {
cost [isSticky, setSticky] = useState(falso);
cost [showBackToTop, setShowBackToTop] = useState(falso);
cost manigliaScroll = () => {
cost finestraScrollTop = finestra.scrollY;
 if (windowScrollTop > 10) {
 impostaSticky(VERO);
 setShowBackToTop(VERO);
 } altro {
 impostaSticky(falso);
 setShowBackToTop(falso);
 }
 };
cost scrollToTop = () => {
finestra.scrollTo({
 superiore: 0,
 comportamento: 'liscio'
 });
 };
 usaEffetto(() => {
 window.addEventListener('scorrere', handleScroll);
ritorno () => {
 window.removeEventListener('scorrere', handleScroll);
 };
 }, []);
cost elementi = [
 {
 nome: 'Casa',
 collegamento: '/'
 },
 {
 nome: 'Di',
 collegamento: '/about'
 },
 {
 nome: 'Contatto',
 collegamento: '/contact'
 }
 ];
cost dati = [ 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 ]
ritorno (
<nomeclasse div="App">
<stile intestazione={{ background: isSticky? '#F F F': '', larghezza: '100%', zIndice: '999',posizione: isSticky ?'fisso':'assoluto' }}>
 {articoli.mappa (articolo => (
<a href={item.link} chiave={item.name}>
 {Nome dell'elemento}
</UN>
 ))}
</header>
<Ul>
 {dati.mappa((x) => {
 ritorno (<li chiave={x}>{X}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<pulsante al clic={scrollToTop}>Torna in cima</button>
 )}</div>
</div>
 );
}
esportarepredefinito StickyHeader;

Questo codice crea un componente di intestazione appiccicoso e lo stilizza utilizzando i CSS. Puoi anche stilizza il componente usando Tailwind CSS.

Metodi alternativi

Puoi anche utilizzare una libreria di terze parti per creare un'intestazione adesiva.

Utilizzando reagire-appiccicoso

La libreria react-sticky ti aiuta a creare elementi sticky in React. Per usare react-sticky, prima installalo:

npm installare reagire-appiccicoso

Quindi, puoi usarlo in questo modo:

importare Reagire da 'reagire';
importare {Contenitore appiccicoso, appiccicoso} da 'reagire-appiccicoso';
funzioneApp() {
cost dati = [ 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 ]
ritorno (
<div>
<Contenitore appiccicoso>
<Appiccicoso>{({ stile }) => (
<stile intestazione={stile}>
 Questo È un'intestazione appiccicosa
</header>
 )}
</Sticky>
<Ul>
 {dati.mappa((x) => {
 ritorno (<li chiave={x}>{X}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
esportarepredefinito Applicazione;

Nel codice precedente, devi prima importare i componenti StickyContainer e Sticky dalla libreria react-sticky.

Quindi, è necessario aggiungere il componente StickyContainer attorno al contenuto che dovrebbe contenere l'elemento appiccicoso. In questo caso, vuoi rendere l'intestazione appiccicosa all'interno dell'elenco che la segue, quindi aggiungi StickyContainer intorno ai due.

Successivamente, aggiungi il componente Sticky attorno all'elemento che desideri rendere appiccicoso. In questo caso, questo è l'elemento header.

Infine, aggiungi un oggetto di stile al componente Sticky. Questo posizionerà correttamente l'intestazione.

Utilizzo di react-stickynode

React-stickynode è un'altra libreria che ti aiuta a creare elementi appiccicosi in React.

Per usare react-stickynode, prima installalo:

npm installare react-stickynode

Quindi puoi usarlo in questo modo:

importare Reagire da 'reagire';
importare Appiccicoso da 'reagire-stickynode';
funzioneApp() {
cost dati = [ 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 ]
ritorno (
<div>
<Sticky abilitato={true} bottomBoundary={1200}>
<div>
 Questo È un'intestazione appiccicosa
</div>
</Sticky>
<Ul>
 {dati.mappa((x) => {
 ritorno (<li chiave={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
esportarepredefinito Applicazione;

Inizia importando il componente Sticky dalla libreria react-stickynode.

Quindi, aggiungi il componente Sticky attorno all'elemento che desideri rendere appiccicoso. In questo caso, rendi l'intestazione appiccicosa aggiungendo il componente Sticky attorno ad essa.

Infine, aggiungi gli oggetti di scena enabled e bottomBoundary al componente Sticky. L'elica abilitata si assicurerà che l'intestazione sia appiccicosa e l'elica bottomBoundary assicurerà che non vada troppo in basso nella pagina.

Migliora l'esperienza dell'utente

Con un'intestazione adesiva, può essere facile per l'utente perdere traccia di dove si trova nella pagina. Le intestazioni adesive possono essere particolarmente problematiche sui dispositivi mobili, dove lo schermo è più piccolo.

Per migliorare l'esperienza dell'utente, puoi anche aggiungere un pulsante "torna all'inizio". Tale pulsante consente all'utente di tornare rapidamente all'inizio della pagina. Questo può essere particolarmente utile su pagine lunghe.

Quando sei pronto, puoi distribuire la tua app React gratuitamente su GitHub Pages.