Hoe maak je een Sticky Header in React

Sommige website-ontwerpen maken gebruik van een koptekst die aan de bovenkant van het scherm "plakt" terwijl u naar beneden scrolt. Een koptekst die zichtbaar blijft terwijl u scrolt, wordt vaak een plakkerige koptekst genoemd.

U kunt een sticky header aan uw React-site toevoegen door zelf aangepaste code te schrijven of door een bibliotheek van derden te gebruiken.

Wat is een plakkerige koptekst?

Een sticky header is een header die vast blijft staan ​​aan de bovenkant van het scherm terwijl de gebruiker naar beneden scrolt. Dit kan handig zijn om belangrijke informatie zichtbaar te houden terwijl de gebruiker scrolt.

Houd er echter rekening mee dat een stick-header de hoeveelheid schermruimte voor uw resterende ontwerp vermindert. Als u een plakkerige koptekst gebruikt, is het een goed idee om deze kort te houden.

Een plakkerige koptekst maken

Het eerste dat u hoeft te doen, is een onscroll-handler instellen. Deze functie wordt uitgevoerd elke keer dat de gebruiker scrolt. U kunt dit doen door een onscroll-gebeurtenislistener toe te voegen aan het vensterobject en door

met behulp van React-hooks. Om de onscroll-handler in te stellen, moet u de useEffect-hook en de addEventListener-methode van het vensterobject gebruiken.

De volgende code maakt een sticky header-component en maakt deze op met behulp van CSS.

importeren Reageren, { useState, useEffect } van 'Reageer';
functieStickyHeader() {
const [isSticky, setSticky] = useState(vals);
const handleScroll = () => {
const vensterScrollTop = raam.scrollY;
 als (windowScrollTop > 10) {
 setKleverig(WAAR);
 } anders {
 setKleverig(vals);
 }
 };
 gebruikEffect(() => {
 venster.addEventListener('rol', omgaan met scrollen);
opbrengst () => {
 venster.removeEventListener('rol', omgaan met scrollen);
 };
 }, []);
const artikelen = [
 {
 naam: 'Thuis',
 koppeling: '/'
 },
 {
 naam: 'Over',
 koppeling: '/about'
 },
 {
 naam: 'Contact',
 koppeling: '/contact'
 }
 ];
const gegevens = [ 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 ]
opbrengst (
<div className="app">
<header style={{ background: isSticky? '#fff': '', breedte: '100%', zIndex: '999', positie: is Sticky ?'vast':'absoluut' }}>
 {items.map (item => (
<a href={item.link} key={item.name}>
 {Itemnaam}
</A>
 ))}
</header>
<ul>
 {data.map((x) => {
 opbrengst (<li-toets={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
exporterenstandaard StickyHeader;

Deze methode maakt gebruik van inline styling, maar u kunt ook CSS-klassen gebruiken. Bijvoorbeeld:

.kleverig {
 positie: vast;
 bovenaan: 0;
 breedte: 100%;
 z-index: 999;
}

De resulterende pagina ziet er als volgt uit:

Extra functies

Er zijn een paar andere dingen die u kunt doen om uw sticky header gebruiksvriendelijker te maken. U kunt bijvoorbeeld een back-to-top-knop toevoegen of de koptekst transparant maken wanneer de gebruiker naar beneden scrolt.

U kunt de volgende code gebruiken om een ​​back-to-top-knop toe te voegen.

importeren Reageren, { useState, useEffect } van 'Reageer';
functieStickyHeader() {
const [isSticky, setSticky] = useState(vals);
const [showBackToTop, setShowBackToTop] = useState(vals);
const handleScroll = () => {
const vensterScrollTop = raam.scrollY;
 als (windowScrollTop > 10) {
 setKleverig(WAAR);
 setShowBackToTop(WAAR);
 } anders {
 setKleverig(vals);
 setShowBackToTop(vals);
 }
 };
const scrollToTop = () => {
raam.scrollTo({
 bovenaan: 0,
 gedrag: 'zacht'
 });
 };
 gebruikEffect(() => {
 venster.addEventListener('rol', omgaan met scrollen);
opbrengst () => {
 venster.removeEventListener('rol', omgaan met scrollen);
 };
 }, []);
const artikelen = [
 {
 naam: 'Thuis',
 koppeling: '/'
 },
 {
 naam: 'Over',
 koppeling: '/about'
 },
 {
 naam: 'Contact',
 koppeling: '/contact'
 }
 ];
const gegevens = [ 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 ]
opbrengst (
<div className="app">
<header style={{ background: isSticky? '#fff': '', breedte: '100%', zIndex: '999', positie: is Sticky ?'vast':'absoluut' }}>
 {items.map (item => (
<a href={item.link} key={item.name}>
 {Itemnaam}
</A>
 ))}
</header>
<ul>
 {data.map((x) => {
 opbrengst (<li-toets={x}>{X}</li>)
 })}
</ul>
<div>
 {toonBackToTop && (
<knop onClick={scrollToTop}>Terug naar boven</button>
 )}</div>
</div>
 );
}
exporterenstandaard StickyHeader;

Deze code maakt een sticky header-component en maakt deze op met behulp van CSS. Je kan ook style de component met behulp van Tailwind CSS.

Alternatieve methoden

U kunt ook een bibliotheek van derden gebruiken om een ​​plakkerige koptekst te maken.

React-sticky gebruiken

De react-sticky-bibliotheek helpt je bij het maken van sticky-elementen in React. Om react-sticky te gebruiken, installeer het eerst:

npm installeren reageren-plakkerig

Dan kun je het als volgt gebruiken:

importeren Reageer van 'Reageer';
importeren { StickyContainer, Sticky } van 'reageren-plakkerig';
functieapp() {
const gegevens = [ 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 ]
opbrengst (
<div>
<Kleverige container>
<Kleverig>{({ stijl }) => (
<kopstijl={stijl}>
 Dit is een plakkerige kop
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 opbrengst (<li-toets={x}>{X}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
exporterenstandaard App;

In de bovenstaande code moet je eerst de StickyContainer- en Sticky-componenten importeren uit de react-sticky-bibliotheek.

Vervolgens moet u de StickyContainer-component toevoegen rond de inhoud die het plakkerige element zou moeten bevatten. In dit geval wilt u de koptekst plakkerig maken in de lijst die erop volgt, dus voeg de StickyContainer toe rond de twee.

Voeg vervolgens de Sticky-component toe rond het element dat u plakkerig wilt maken. In dit geval is dat het header-element.

Voeg ten slotte een stijlprop toe aan de Sticky-component. Hierdoor wordt de kop correct gepositioneerd.

React-stickynode gebruiken

React-stickynode is een andere bibliotheek die je helpt bij het maken van plakkerige elementen in React.

Om react-stickynode te gebruiken, installeer het eerst:

npm installeren reactie-stickynode

Dan kun je het zo gebruiken:

importeren Reageer van 'Reageer';
importeren Kleverig van 'reageren-stickynode';
functieapp() {
const gegevens = [ 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 ]
opbrengst (
<div>
<Sticky ingeschakeld={true} bottomBoundary={1200}>
<div>
 Dit is een plakkerige kop
</div>
</Sticky>
<ul>
 {data.map((x) => {
 opbrengst (<li-toets={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
exporterenstandaard App;

Begin met het importeren van de Sticky-component uit de react-stickynode-bibliotheek.

Voeg vervolgens de Sticky-component toe rond het element dat u plakkerig wilt maken. Maak in dit geval de koptekst plakkerig door de plakkerige component eromheen toe te voegen.

Voeg ten slotte de ingeschakelde en bottomBoundary-props toe aan de Sticky-component. De ingeschakelde prop zorgt ervoor dat de koptekst plakkerig is en de bottomBoundary-prop zorgt ervoor dat deze niet te ver naar beneden op de pagina gaat.

Verbeter de gebruikerservaring

Met een plakkerige koptekst kan het voor de gebruiker gemakkelijk zijn om uit het oog te verliezen waar ze zich op de pagina bevinden. Sticky headers kunnen vooral problematisch zijn op mobiele apparaten, waar het scherm kleiner is.

Om de gebruikerservaring te verbeteren, kunt u ook een "terug naar boven"-knop toevoegen. Met zo'n knop kan de gebruiker snel terugscrollen naar de bovenkant van de pagina. Dit kan vooral handig zijn op lange pagina's.

Als je er klaar voor bent, kun je je React-app gratis implementeren op GitHub Pages.