Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Nogle webstedsdesign gør brug af en header, der "klæber" til toppen af ​​skærmen, når du scroller ned. En overskrift, der forbliver synlig, mens du ruller, kaldes ofte en klæbrig overskrift.

Du kan tilføje en sticky header til dit React-websted ved at skrive tilpasset kode selv eller ved at bruge et tredjepartsbibliotek.

Hvad er en Sticky Header?

En sticky header er en header, der forbliver fast på toppen af ​​skærmen, når brugeren ruller ned på siden. Dette kan være nyttigt til at holde vigtig information synlig, mens brugeren ruller.

Husk dog, at en stick-header reducerer mængden af ​​skærmejendom til dit resterende design. Hvis du bruger en sticky header, er det en god idé at holde den kort.

Oprettelse af en Sticky Header

Den første ting du skal gøre er at konfigurere en onscroll-handler. Denne funktion vil køre hver gang brugeren ruller. Du kan gøre dette ved at tilføje en onscroll-hændelseslytter til vinduesobjektet og ved at

instagram viewer
ved hjælp af React kroge. For at konfigurere onscroll-handleren skal du bruge useEffect-krogen og addEventListener-metoden for vinduesobjektet.

Følgende kode opretter en sticky header-komponent og styles ved hjælp af CSS.

importere Reager, { useState, useEffect } fra 'reagere';
fungereStickyHeader() {
konst [isSticky, setSticky] = useState(falsk);
konst handleScroll = () => {
konst windowScrollTop = vindue.scrollY;
 if (windowScrollTop > 10) {
 sætSticky(rigtigt);
 } andet {
 sætSticky(falsk);
 }
 };
 useEffect(() => {
 window.addEventListener('rulle', handleScroll);
Vend tilbage () => {
 window.removeEventListener('rulle', handleScroll);
 };
 }, []);
konst varer = [
 {
 navn: 'Hjem',
 link: '/'
 },
 {
 navn: 'Om',
 link: '/about'
 },
 {
 navn: 'Kontakt',
 link: '/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 ]
Vend tilbage (
<div klassenavn="App">
<header style={{ baggrund: er Sticky? '#fff': '', bredde: '100%', zIndex: '999',position: er Sticky ?'fast':'absolut' }}>
 {items.map (item => (
<a href={item.link}-nøgle={item.name}>
 {tingens navn}
</en>
 ))}
</header>
<ul>
 {data.map((x) => {
 Vend tilbage (<li nøgle={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
eksportStandard StickyHeader;

Denne metode bruger inline-styling, men du kan også bruge CSS-klasser. For eksempel:

.klæbrig {
 position: fast;
 top: 0;
 bredde: 100%;
 z-indeks: 999;
}

Den resulterende side vil se sådan ud:

Yderligere funktioner

Der er et par andre ting, du kan gøre for at gøre din sticky header mere brugervenlig. For eksempel kan du tilføje en tilbage-til-top-knap eller gøre overskriften gennemsigtig, når brugeren ruller ned.

Du kan bruge følgende kode til at tilføje en tilbage-til-top-knap.

importere Reager, { useState, useEffect } fra 'reagere';
fungereStickyHeader() {
konst [isSticky, setSticky] = useState(falsk);
konst [showBackToTop, setShowBackToTop] = useState(falsk);
konst handleScroll = () => {
konst windowScrollTop = vindue.scrollY;
 if (windowScrollTop > 10) {
 sætSticky(rigtigt);
 sætShowBackToTop(rigtigt);
 } andet {
 sætSticky(falsk);
 sætShowBackToTop(falsk);
 }
 };
konst scrollToTop = () => {
vindue.scrollTo({
 top: 0,
 opførsel: 'glat'
 });
 };
 useEffect(() => {
 window.addEventListener('rulle', handleScroll);
Vend tilbage () => {
 window.removeEventListener('rulle', handleScroll);
 };
 }, []);
konst varer = [
 {
 navn: 'Hjem',
 link: '/'
 },
 {
 navn: 'Om',
 link: '/about'
 },
 {
 navn: 'Kontakt',
 link: '/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 ]
Vend tilbage (
<div klassenavn="App">
<header style={{ baggrund: er Sticky? '#fff': '', bredde: '100%', zIndex: '999',position: er Sticky ?'fast':'absolut' }}>
 {items.map (item => (
<a href={item.link}-nøgle={item.name}>
 {tingens navn}
</en>
 ))}
</header>
<ul>
 {data.map((x) => {
 Vend tilbage (<li nøgle={x}>{x}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<knap onClick={scrollToTop}>Tilbage til toppen</button>
 )}</div>
</div>
 );
}
eksportStandard StickyHeader;

Denne kode opretter en sticky header-komponent og styles ved hjælp af CSS. Du kan også style komponenten ved hjælp af Tailwind CSS.

Alternative metoder

Du kan også bruge et tredjepartsbibliotek til at oprette en sticky header.

Bruger react-sticky

React-sticky-biblioteket hjælper dig med at skabe sticky elementer i React. For at bruge react-sticky skal du først installere det:

npm installere reagere klæbrig

Så kan du bruge det sådan her:

importere Reagere fra 'reagere';
importere { StickyContainer, Sticky } fra 'reager-klæbende';
fungereApp() {
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 ]
Vend tilbage (
<div>
<StickyContainer>
<Klæbrig>{({ stil }) => (
<header style={style}>
 Det her er en klæbrig overskrift
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 Vend tilbage (<li nøgle={x}>{x}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
eksportStandard App;

I ovenstående kode skal du først importere StickyContainer- og Sticky-komponenterne fra react-sticky-biblioteket.

Derefter skal du tilføje StickyContainer-komponenten omkring det indhold, der skal indeholde det klæbrige element. I dette tilfælde vil du gøre overskriften klæbrig på listen, der følger den, så tilføj StickyContainer omkring de to.

Tilføj derefter Sticky-komponenten omkring det element, du vil gøre klæbrigt. I dette tilfælde er det header-elementet.

Tilføj endelig en stilrekvisit til Sticky-komponenten. Dette vil placere overskriften korrekt.

Brug af react-stickynode

React-stickynode er et andet bibliotek, der hjælper dig med at skabe klæbrige elementer i React.

For at bruge react-stickynode skal du først installere det:

npm installere reagere-klæbende node

Så kan du bruge det sådan her:

importere Reagere fra 'reagere';
importere Klæbrig fra 'react-stickynode';
fungereApp() {
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 ]
Vend tilbage (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
 Det her er en klæbrig overskrift
</div>
</Sticky>
<ul>
 {data.map((x) => {
 Vend tilbage (<li nøgle={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
eksportStandard App;

Start med at importere Sticky-komponenten fra react-stickynode-biblioteket.

Tilføj derefter Sticky-komponenten omkring det element, du vil gøre klæbrigt. I dette tilfælde skal du gøre overskriften klæbrig ved at tilføje Sticky-komponenten omkring den.

Tilføj endelig de aktiverede og nederste Boundary-rekvisitter til Sticky-komponenten. Den aktiverede prop vil sørge for, at headeren er klæbrig, og bottomBoundary prop vil sikre, at den ikke går for langt ned på siden.

Forbedre brugeroplevelsen

Med en sticky header kan det være nemt for brugeren at miste overblikket over, hvor de er på siden. Sticky headers kan især være problematisk på mobile enheder, hvor skærmen er mindre.

For at forbedre brugeroplevelsen kan du også tilføje en "tilbage til toppen"-knap. En sådan knap giver brugeren mulighed for hurtigt at rulle tilbage til toppen af ​​siden. Dette kan især være nyttigt på lange sider.

Når du er klar, kan du implementere din React-app gratis på GitHub-sider.