Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Vissa webbdesigner använder sig av en rubrik som "fastnar" längst upp på skärmen när du rullar nedåt. En rubrik som förblir synlig när du rullar kallas ofta en sticky header.

Du kan lägga till en klibbig rubrik på din React-webbplats genom att skriva anpassad kod själv eller genom att använda ett tredjepartsbibliotek.

Vad är en Sticky Header?

En sticky header är en rubrik som förblir fixerad längst upp på skärmen när användaren rullar ner på sidan. Detta kan vara användbart för att hålla viktig information synlig när användaren rullar.

Kom dock ihåg att ett stickhuvud minskar mängden skärmfastigheter för din återstående design. Om du använder en sticky header är det en bra idé att hålla den kort.

Skapa en Sticky Header

Det första du behöver göra är att ställa in en onscroll-hanterare. Denna funktion kommer att köras varje gång användaren rullar. Du kan göra detta genom att lägga till en onscroll-händelselyssnare till fönsterobjektet och genom att

instagram viewer
med hjälp av React-krokar. För att ställa in onscroll-hanteraren måste du använda useEffect-kroken och addEventListener-metoden för window-objektet.

Följande kod skapar en sticky header-komponent och formaterar den med CSS.

importera Reagera, { useState, useEffect } från 'reagera';
fungeraStickyHeader() {
konst [isSticky, setSticky] = useState(falsk);
konst handleScroll = () => {
konst windowScrollTop = fönster.scrollY;
 if (windowScrollTop > 10) {
 setSticky(Sann);
 } annan {
 setSticky(falsk);
 }
 };
 useEffect(() => {
 window.addEventListener('skrolla', handleScroll);
lämna tillbaka () => {
 window.removeEventListener('skrolla', handleScroll);
 };
 }, []);
konst föremål = [
 {
 namn: 'Hem',
 länk: '/'
 },
 {
 namn: 'Handla om',
 länk: '/about'
 },
 {
 namn: 'Kontakt',
 länk: '/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 ]
lämna tillbaka (
<div className="App">
<header style={{ bakgrund: är Sticky? '#fff': '', bredd: '100%', zIndex: '999',position: är Sticky ?'fast':'absolut' }}>
 {items.map (artikel => (
<a href={item.link}-nyckel={item.name}>
 {föremålsnamn}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 lämna tillbaka (<li nyckel={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
exporterastandard StickyHeader;

Den här metoden använder inline-styling, men du kan också använda CSS-klasser. Till exempel:

.klibbig {
 position: fast;
 topp: 0;
 bredd: 100%;
 z-index: 999;
}

Den resulterande sidan kommer att se ut så här:

Ytterligare egenskaper

Det finns några andra saker du kan göra för att göra din sticky header mer användarvänlig. Du kan till exempel lägga till en back-to-top-knapp eller göra rubriken transparent när användaren rullar nedåt.

Du kan använda följande kod för att lägga till en back-to-top-knapp.

importera Reagera, { useState, useEffect } från 'reagera';
fungeraStickyHeader() {
konst [isSticky, setSticky] = useState(falsk);
konst [showBackToTop, setShowBackToTop] = useState(falsk);
konst handleScroll = () => {
konst windowScrollTop = fönster.scrollY;
 if (windowScrollTop > 10) {
 setSticky(Sann);
 setShowBackToTop(Sann);
 } annan {
 setSticky(falsk);
 setShowBackToTop(falsk);
 }
 };
konst scrollToTop = () => {
fönster.scrollTo({
 topp: 0,
 beteende: 'slät'
 });
 };
 useEffect(() => {
 window.addEventListener('skrolla', handleScroll);
lämna tillbaka () => {
 window.removeEventListener('skrolla', handleScroll);
 };
 }, []);
konst föremål = [
 {
 namn: 'Hem',
 länk: '/'
 },
 {
 namn: 'Handla om',
 länk: '/about'
 },
 {
 namn: 'Kontakt',
 länk: '/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 ]
lämna tillbaka (
<div className="App">
<header style={{ bakgrund: är Sticky? '#fff': '', bredd: '100%', zIndex: '999',position: är Sticky ?'fast':'absolut' }}>
 {items.map (artikel => (
<a href={item.link}-nyckel={item.name}>
 {föremålsnamn}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 lämna tillbaka (<li nyckel={x}>{x}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<button onClick={scrollToTop}>Tillbaka till toppen</button>
 )}</div>
</div>
 );
}
exporterastandard StickyHeader;

Den här koden skapar en sticky header-komponent och formaterar den med CSS. Du kan också styla komponenten med Tailwind CSS.

Alternativa metoder

Du kan också använda ett tredjepartsbibliotek för att skapa en klibbig rubrik.

Använder react-sticky

React-sticky-biblioteket hjälper dig att skapa klibbiga element i React. För att använda react-sticky, installera det först:

npm Installera reagera-klibbig

Sedan kan du använda det så här:

importera Reagera från 'reagera';
importera { StickyContainer, Sticky } från 'reagera-klibbig';
fungeraApp() {
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 ]
lämna tillbaka (
<div>
<StickyContainer>
<Klibbig>{({ stil }) => (
<header style={style}>
 Detta är en klibbig rubrik
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 lämna tillbaka (<li nyckel={x}>{x}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
exporterastandard App;

I koden ovan måste du först importera StickyContainer- och Sticky-komponenterna från react-sticky-biblioteket.

Sedan måste du lägga till StickyContainer-komponenten runt innehållet som ska innehålla det klibbiga elementet. I det här fallet vill du göra rubriken klibbig i listan som följer den, så lägg till StickyContainer runt de två.

Lägg sedan till Sticky-komponenten runt elementet som du vill göra klibbigt. I det här fallet är det rubrikelementet.

Lägg slutligen till en stilrekvisita till Sticky-komponenten. Detta kommer att placera rubriken korrekt.

Använder react-stickynode

React-stickynode är ett annat bibliotek som hjälper dig att skapa klibbiga element i React.

För att använda react-stickynode, installera den först:

npm Installera reagera-stickynode

Då kan du använda det så här:

importera Reagera från 'reagera';
importera Klibbig från 'reagera-stickynode';
fungeraApp() {
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 ]
lämna tillbaka (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
 Detta är en klibbig rubrik
</div>
</Sticky>
<ul>
 {data.map((x) => {
 lämna tillbaka (<li nyckel={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
exporterastandard App;

Börja med att importera Sticky-komponenten från react-stickynode-biblioteket.

Lägg sedan till Sticky-komponenten runt elementet som du vill göra klibbigt. I det här fallet gör du rubriken klibbig genom att lägga till Sticky-komponenten runt den.

Lägg slutligen till de aktiverade och nedersta Boundary-rekvisitana till Sticky-komponenten. Den aktiverade rekvisitan kommer att se till att rubriken är klibbig, och bottomBoundary-propellen ser till att den inte går för långt ner på sidan.

Förbättra användarupplevelsen

Med en sticky header kan det vara lätt för användaren att tappa koll på var de befinner sig på sidan. Sticky headers kan vara särskilt problematiskt på mobila enheter, där skärmen är mindre.

För att förbättra användarupplevelsen kan du också lägga till en "tillbaka till toppen"-knapp. En sådan knapp låter användaren snabbt rulla tillbaka till toppen av sidan. Detta kan vara särskilt användbart på långa sidor.

När du är redo kan du distribuera din React-app gratis på GitHub-sidor.