Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Noen nettstedsdesign bruker en overskrift som "fester seg" til toppen av skjermen mens du ruller nedover. En overskrift som forblir synlig mens du ruller, kalles ofte en klebrig overskrift.

Du kan legge til en selvklebende overskrift på React-siden din ved å skrive egendefinert kode selv eller ved å bruke et tredjepartsbibliotek.

Hva er en Sticky Header?

En klebrig overskrift er en overskrift som forblir festet til toppen av skjermen mens brukeren ruller nedover siden. Dette kan være nyttig for å holde viktig informasjon synlig mens brukeren ruller.

Husk imidlertid at en pinneoverskrift reduserer mengden skjermeiendom for gjenværende design. Hvis du bruker en klebrig overskrift, er det lurt å holde den kort.

Opprette en Sticky Header

Det første du må gjøre er å sette opp en onscroll-behandler. Denne funksjonen vil kjøre hver gang brukeren ruller. Du kan gjøre dette ved å legge til en onscroll-hendelseslytter til vindusobjektet og ved å

instagram viewer
ved hjelp av React-kroker. For å sette opp onscroll-behandleren, må du bruke useEffect-kroken og addEventListener-metoden til vindusobjektet.

Følgende kode lager en klebrig header-komponent og stiler den ved hjelp av CSS.

import Reager, { useState, useEffect } fra 'reagere';
funksjonStickyHeader() {
konst [isSticky, setSticky] = useState(falsk);
konst handleScroll = () => {
konst windowScrollTop = vindu.scrollY;
 if (windowScrollTop > 10) {
 settSticky(ekte);
 } ellers {
 settSticky(falsk);
 }
 };
 useEffect(() => {
 window.addEventListener('bla', handleScroll);
komme tilbake () => {
 window.removeEventListener('bla', 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 ]
komme tilbake (
<div klassenavn="App">
<header style={{ bakgrunn: er Sticky? '#fff': '', bredde: '100%', zIndex: '999',posisjon: er Sticky ?'fikset':'absolutt' }}>
 {items.map (item => (
<a href={item.link} key={item.name}>
 {gjenstandsnavn}
</en>
 ))}
</header>
<ul>
 {data.map((x) => {
 komme tilbake (<li key={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
eksportmisligholde StickyHeader;

Denne metoden bruker inline styling, men du kan også bruke CSS-klasser. For eksempel:

.klebrig {
 posisjon: fast;
 topp: 0;
 bredde: 100 %;
 z-indeks: 999;
}

Den resulterende siden vil se slik ut:

Tilleggsfunksjoner

Det er noen andre ting du kan gjøre for å gjøre den klebrige overskriften mer brukervennlig. Du kan for eksempel legge til en back-to-top-knapp eller gjøre overskriften gjennomsiktig når brukeren ruller nedover.

Du kan bruke følgende kode for å legge til en back-to-top-knapp.

import Reager, { useState, useEffect } fra 'reagere';
funksjonStickyHeader() {
konst [isSticky, setSticky] = useState(falsk);
konst [showBackToTop, setShowBackToTop] = useState(falsk);
konst handleScroll = () => {
konst windowScrollTop = vindu.scrollY;
 if (windowScrollTop > 10) {
 settSticky(ekte);
 setShowBackToTop(ekte);
 } ellers {
 settSticky(falsk);
 setShowBackToTop(falsk);
 }
 };
konst scrollToTop = () => {
vindu.scrollTo({
 topp: 0,
 oppførsel: 'glatt'
 });
 };
 useEffect(() => {
 window.addEventListener('bla', handleScroll);
komme tilbake () => {
 window.removeEventListener('bla', 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 ]
komme tilbake (
<div klassenavn="App">
<header style={{ bakgrunn: er Sticky? '#fff': '', bredde: '100%', zIndex: '999',posisjon: er Sticky ?'fikset':'absolutt' }}>
 {items.map (item => (
<a href={item.link} key={item.name}>
 {gjenstandsnavn}
</en>
 ))}
</header>
<ul>
 {data.map((x) => {
 komme tilbake (<li key={x}>{x}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<button onClick={scrollToTop}>Tilbake til toppen</button>
 )}</div>
</div>
 );
}
eksportmisligholde StickyHeader;

Denne koden lager en klebrig header-komponent og stiler den ved hjelp av CSS. Du kan også stil komponenten med Tailwind CSS.

Alternative metoder

Du kan også bruke et tredjepartsbibliotek til å lage en klebrig overskrift.

Bruker react-sticky

React-sticky-biblioteket hjelper deg med å lage klebrige elementer i React. For å bruke react-sticky, installer den først:

npm installere reagere klissete

Deretter kan du bruke det slik:

import Reagere fra 'reagere';
import { StickyContainer, Sticky } fra 'reager-klebrig';
funksjonApp() {
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 ]
komme tilbake (
<div>
<StickyContainer>
<Klistrete>{({ stil }) => (
<header style={style}>
 Dette er en klebrig overskrift
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 komme tilbake (<li key={x}>{x}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
eksportmisligholde App;

I koden ovenfor må du først importere StickyContainer- og Sticky-komponentene fra react-sticky-biblioteket.

Deretter må du legge til StickyContainer-komponenten rundt innholdet som skal inneholde det klebrige elementet. I dette tilfellet vil du gjøre overskriften klissete i listen som følger den, så legg til StickyContainer rundt de to.

Deretter legger du til Sticky-komponenten rundt elementet du vil gjøre klebrig. I dette tilfellet er det overskriftselementet.

Til slutt legger du til en stilrekvisitt til Sticky-komponenten. Dette vil plassere overskriften riktig.

Bruker react-stickynode

React-stickynode er et annet bibliotek som hjelper deg med å lage klebrige elementer i React.

For å bruke react-stickynode, installer den først:

npm installere reager-stickynode

Da kan du bruke det slik:

import Reagere fra 'reagere';
import Klistrete fra 'react-stickynode';
funksjonApp() {
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 ]
komme tilbake (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
 Dette er en klebrig overskrift
</div>
</Sticky>
<ul>
 {data.map((x) => {
 komme tilbake (<li key={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
eksportmisligholde App;

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

Deretter legger du til Sticky-komponenten rundt elementet du vil gjøre klebrig. I dette tilfellet gjør du overskriften klissete ved å legge til Sticky-komponenten rundt den.

Til slutt legger du til de aktiverte og nederste Boundary-rekvisittene til Sticky-komponenten. Den aktiverte propen vil sørge for at overskriften er klissete, og bottomBoundary-propp vil sørge for at den ikke går for langt ned på siden.

Forbedre brukeropplevelsen

Med en klebrig overskrift kan det være lett for brukeren å miste oversikten over hvor de er på siden. Sticky headers kan være spesielt problematisk på mobile enheter, der skjermen er mindre.

For å forbedre brukeropplevelsen kan du også legge til en "tilbake til toppen"-knapp. En slik knapp lar brukeren bla raskt tilbake til toppen av siden. Dette kan være spesielt nyttig på lange sider.

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