Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Joissakin verkkosivustojen malleissa käytetään otsikkoa, joka "kiintyy" näytön yläosaan, kun vierität alaspäin. Otsikkoa, joka pysyy näkyvissä vierittäessäsi, kutsutaan usein tahmeaksi otsikoksi.

Voit lisätä tarttuvan otsikon React-sivustollesi kirjoittamalla mukautetun koodin itse tai käyttämällä kolmannen osapuolen kirjastoa.

Mikä on Sticky Header?

Tahmea otsikko on otsikko, joka pysyy kiinnitettynä näytön yläosaan, kun käyttäjä vierittää sivua alaspäin. Tämä voi olla hyödyllistä pitääksesi tärkeät tiedot näkyvissä käyttäjän vieriessä.

Muista kuitenkin, että tikkuotsikko vähentää jäljellä olevan suunnittelun näytön kiinteistöjen määrää. Jos käytät tahmeaa otsikkoa, se kannattaa pitää lyhyenä.

Sticky Headerin luominen

Ensimmäinen asia, joka sinun on tehtävä, on määrittää vierityskäsittelijä. Tämä toiminto toimii aina, kun käyttäjä vierittää. Voit tehdä tämän lisäämällä onscroll-tapahtuman kuuntelijan ikkunaobjektiin ja by

käyttämällä React-koukkuja. Onscroll-käsittelijän määrittämiseksi sinun on käytettävä ikkunaobjektin useEffect-koukkua ja addEventListener-metodia.

Seuraava koodi luo tahmean otsikkokomponentin ja muotoilee sen CSS: n avulla.

tuonti React, { useState, useEffect } alkaen "reagoi";
toimintoStickyHeader() {
konst [isSticky, setSticky] = useState(väärä);
konst handleScroll = () => {
konst windowsScrollTop = ikkuna.scrollY;
 if (windowScrollTop > 10) {
 setSticky(totta);
 } muu {
 setSticky(väärä);
 }
 };
 useEffect(() => {
 window.addEventListener('rullaa', handleScroll);
palata () => {
 window.removeEventListener('rullaa', handleScroll);
 };
 }, []);
konst tuotteet = [
 {
 nimi: 'Koti',
 linkki: '/'
 },
 {
 nimi: 'Noin',
 linkki: '/about'
 },
 {
 nimi: 'Ottaa yhteyttä',
 linkki: '/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 ]
palata (
<div className="Sovellus">
<header style={{ tausta: isSticky? '#F F F': '', leveys: '100%', zIndex: '999',asento: isSticky?'korjattu':'ehdoton' }}>
 {items.map (tuote => (
<a href={tuote.link} avain={tuote.nimi}>
 {tuotteen nimi}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 paluu (<li key={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
viedäoletuksena StickyHeader;

Tämä menetelmä käyttää sisäistä tyyliä, mutta voit myös käyttää CSS-luokkia. Esimerkiksi:

.tahmea {
 asento: kiinteä;
 alkuun: 0;
 leveys: 100 %;
 z-indeksi: 999;
}

Tuloksena oleva sivu näyttää tältä:

Lisäominaisuuksia

Voit tehdä tarttuvasta otsikosta käyttäjäystävällisemmän muutaman muun asian. Voit esimerkiksi lisätä takaisin ylös -painikkeen tai tehdä otsikosta läpinäkyvän, kun käyttäjä vierittää alaspäin.

Voit lisätä takaisin ylös -painikkeen käyttämällä seuraavaa koodia.

tuonti React, { useState, useEffect } alkaen "reagoi";
toimintoStickyHeader() {
konst [isSticky, setSticky] = useState(väärä);
konst [showBackToTop, setShowBackToTop] = useState(väärä);
konst handleScroll = () => {
konst windowsScrollTop = ikkuna.scrollY;
 if (windowScrollTop > 10) {
 setSticky(totta);
 setShowBackToTop(totta);
 } muu {
 setSticky(väärä);
 setShowBackToTop(väärä);
 }
 };
konst scrollToTop = () => {
ikkuna.scrollTo({
 alkuun: 0,
 käyttäytyminen: 'sileä'
 });
 };
 useEffect(() => {
 window.addEventListener('rullaa', handleScroll);
palata () => {
 window.removeEventListener('rullaa', handleScroll);
 };
 }, []);
konst tuotteet = [
 {
 nimi: 'Koti',
 linkki: '/'
 },
 {
 nimi: 'Noin',
 linkki: '/about'
 },
 {
 nimi: 'Ottaa yhteyttä',
 linkki: '/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 ]
palata (
<div className="Sovellus">
<header style={{ tausta: isSticky? '#F F F': '', leveys: '100%', zIndex: '999',asento: isSticky?'korjattu':'ehdoton' }}>
 {items.map (tuote => (
<a href={tuote.link} avain={tuote.nimi}>
 {tuotteen nimi}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 paluu (<li key={x}>{x}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<painike onClick={scrollToTop}>Takaisin alkuun</button>
 )}</div>
</div>
 );
}
viedäoletuksena StickyHeader;

Tämä koodi luo tahmean otsikkokomponentin ja muotoilee sen CSS: n avulla. Voit myös muotoile komponentti Tailwind CSS: n avulla.

Vaihtoehtoiset menetelmät

Voit myös käyttää kolmannen osapuolen kirjastoa luodaksesi tarttuvan otsikon.

React-stickyn käyttö

React-Sticky-kirjasto auttaa sinua luomaan tarttuvia elementtejä Reactissa. Jos haluat käyttää react-stickyä, asenna se ensin:

npm Asentaa reagoi-tarttuva

Sitten voit käyttää sitä näin:

tuonti Reagoi alkaen "reagoi";
tuonti { StickyContainer, Sticky } alkaen "reagoi tahmea";
toimintoSovellus() {
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 ]
palata (
<div>
<StickyContainer>
<Tahmea>{({ tyyli }) => (
<header style={style}>
 Tämä On tahmea otsikko
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 paluu (<li key={x}>{x}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
viedäoletuksena Sovellus;

Yllä olevassa koodissa sinun on ensin tuotava StickyContainer- ja Sticky-komponentit react-sticky-kirjastosta.

Sitten sinun on lisättävä StickyContainer-komponentti sisällön ympärille, jonka pitäisi sisältää tahmea elementti. Tässä tapauksessa haluat tehdä otsikosta tahmean sitä seuraavan luettelon sisällä, joten lisää StickyContainer näiden kahden ympärille.

Lisää seuraavaksi Sticky-komponentti sen elementin ympärille, jonka haluat tehdä tahmeaksi. Tässä tapauksessa se on otsikkoelementti.

Lisää lopuksi tyylisuositus Sticky-komponenttiin. Tämä sijoittaa otsikon oikein.

React-stickynodin käyttö

React-stickynode on toinen kirjasto, jonka avulla voit luoda tarttuvia elementtejä Reactissa.

Jos haluat käyttää react-stickynodea, asenna se ensin:

npm Asentaa reagoi-tarrasolmu

Sitten voit käyttää sitä näin:

tuonti Reagoi alkaen "reagoi";
tuonti Tahmea alkaen 'react-stickynode';
toimintoSovellus() {
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 ]
palata (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
 Tämä On tahmea otsikko
</div>
</Sticky>
<ul>
 {data.map((x) => {
 paluu (<li key={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
viedäoletuksena Sovellus;

Aloita tuomalla Sticky-komponentti react-stickynode-kirjastosta.

Lisää sitten Sticky-komponentti sen elementin ympärille, jonka haluat tehdä tahmeaksi. Tee tässä tapauksessa otsikko tahmeaksi lisäämällä sen ympärille Sticky-komponentti.

Lisää lopuksi käytössä ja bottomBoundary-props Sticky-komponenttiin. Käytössä oleva ehdotus varmistaa, että otsikko on tahmea, ja bottomBoundary-tuki varmistaa, että se ei mene liian pitkälle sivulla.

Paranna käyttökokemusta

Tarttuvan otsikon avulla käyttäjä voi helposti unohtaa, missä hän on sivulla. Tahmeat otsikot voivat olla erityisen ongelmallisia mobiililaitteissa, joissa näyttö on pienempi.

Parantaaksesi käyttökokemusta, voit myös lisätä "takaisin alkuun" -painikkeen. Tällaisen painikkeen avulla käyttäjä voi selata nopeasti takaisin sivun yläosaan. Tämä voi olla erityisen hyödyllistä pitkillä sivuilla.

Kun olet valmis, voit ottaa React-sovelluksesi käyttöön ilmaiseksi GitHub-sivuilla.