Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Mõned veebisaidi kujundused kasutavad päist, mis "kleepub" allapoole kerimisel ekraani ülaossa. Päist, mis jääb kerimisel nähtavaks, nimetatakse sageli kleepuvaks päiseks.

Saate lisada oma Reacti saidile kleepuva päise, kirjutades ise kohandatud koodi või kasutades kolmanda osapoole teeki.

Mis on kleepuv päis?

Kleeppäis on päis, mis jääb ekraani ülaossa fikseerituks, kui kasutaja lehte alla kerib. See võib olla kasulik olulise teabe nähtaval hoidmiseks, kui kasutaja kerib.

Pidage siiski meeles, et pulgapäis vähendab teie allesjäänud kujunduse jaoks kuvatava kinnisvara hulka. Kui kasutate kleepuvat päist, on hea mõte jätta see lühike.

Kleepuva päise loomine

Esimene asi, mida peate tegema, on seadistada kerimistöötleja. See funktsioon töötab iga kord, kui kasutaja kerib. Seda saate teha, lisades aknaobjektile kerimissündmuste kuulaja ja by kasutades Reacti konkse

instagram viewer
. Kerimiskäitleja seadistamiseks peate kasutama aknaobjekti meetodit useEffect ja addEventListener.

Järgmine kood loob kleepuva päise komponendi ja kujundab selle CSS-i abil.

importida Reageerida, { useState, useEffect } alates 'reageerida';
funktsiooniStickyHeader() {
konst [isSticky, setSticky] = useState(vale);
konst käepideScroll = () => {
konst windowsScrollTop = aken.scrollY;
 if (windowScrollTop > 10) {
 setSticky(tõsi);
 } muidu {
 setSticky(vale);
 }
 };
 useEffect(() => {
 window.addEventListener('kerige', käepideScroll);
tagasi () => {
 window.removeEventListener('kerige', käepideScroll);
 };
 }, []);
konst üksused = [
 {
 nimi: 'Kodu',
 link: '/'
 },
 {
 nimi: 'Umbes',
 link: '/about'
 },
 {
 nimi: 'Võtke ühendust',
 link: '/contact'
 }
 ];
konst andmed = [ 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 ]
tagasi (
<div klassiNimi="Rakendus">
<header style={{ background: isSticky? '#fff': '', laius: '100%', zIndex: '999',positsioon: on kleepuv?'fikseeritud':'absoluutne' }}>
 {items.map (üks => (
<a href={item.link} võti={item.name}>
 {asja nimi}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 tagasi (<li võti={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
eksportidavaikimisi StickyHeader;

See meetod kasutab tekstisisest stiili, kuid võite kasutada ka CSS-klasse. Näiteks:

.kleepuv {
 asend: fikseeritud;
 ülemine: 0;
 laius: 100%;
 z-indeks: 999;
}

Saadud leht näeb välja selline:

Lisafunktsioonid

Kleepuva päise kasutajasõbralikumaks muutmiseks saate teha veel mõnda asja. Näiteks saate lisada tagasi üles nupu või muuta päise läbipaistvaks, kui kasutaja alla kerib.

Tagasi üles nupu lisamiseks saate kasutada järgmist koodi.

importida Reageerida, { useState, useEffect } alates 'reageerida';
funktsiooniStickyHeader() {
konst [isSticky, setSticky] = useState(vale);
konst [showBackToTop, setShowBackToTop] = useState(vale);
konst käepideScroll = () => {
konst windowsScrollTop = aken.scrollY;
 if (windowScrollTop > 10) {
 setSticky(tõsi);
 setShowBackToTop(tõsi);
 } muidu {
 setSticky(vale);
 setShowBackToTop(vale);
 }
 };
konst scrollToTop = () => {
aken.scrollTo({
 ülemine: 0,
 käitumine: 'sile'
 });
 };
 useEffect(() => {
 window.addEventListener('kerige', käepideScroll);
tagasi () => {
 window.removeEventListener('kerige', käepideScroll);
 };
 }, []);
konst üksused = [
 {
 nimi: 'Kodu',
 link: '/'
 },
 {
 nimi: 'Umbes',
 link: '/about'
 },
 {
 nimi: 'Võtke ühendust',
 link: '/contact'
 }
 ];
konst andmed = [ 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 ]
tagasi (
<div klassiNimi="Rakendus">
<header style={{ background: isSticky? '#fff': '', laius: '100%', zIndex: '999',positsioon: on kleepuv?'fikseeritud':'absoluutne' }}>
 {items.map (üks => (
<a href={item.link} võti={item.name}>
 {asja nimi}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 tagasi (<li võti={x}>{x}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<nupp onClick={scrollToTop}>Tagasi üles</button>
 )}</div>
</div>
 );
}
eksportidavaikimisi StickyHeader;

See kood loob kleepuva päise komponendi ja kujundab selle CSS-i abil. Sa saad ka komponendi stiil Tailwind CSS-i abil.

Alternatiivsed meetodid

Kleepuva päise loomiseks saate kasutada ka kolmanda osapoole teeki.

Reageeriva kleepuva aine kasutamine

React-kleepuv teek aitab teil luua Reactis kleepuvaid elemente. React-sticky kasutamiseks installige see esmalt:

npm installida reageerivad-kleepuvad

Seejärel saate seda kasutada järgmiselt:

importida Reageerige alates 'reageerida';
importida { StickyContainer, Sticky } alates 'reageerib-kleepuv';
funktsiooniRakendus() {
konst andmed = [ 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 ]
tagasi (
<div>
<Kleepuv konteiner>
<Kleepuv>{({ stiil }) => (
<header style={style}>
 See on kleepuv päis
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 tagasi (<li võti={x}>{x}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
eksportidavaikimisi Rakendus;

Ülaltoodud koodis peate esmalt importima komponendid StickyContainer ja Sticky reageerimis-kleepuva teegist.

Seejärel peate kleepuvat elementi sisaldava sisu ümber lisama komponendi StickyContainer. Sel juhul soovite muuta päise sellele järgnevas loendis kleepuvaks, nii et lisage StickyContainer nende kahe ümber.

Järgmisena lisage kleepuvaks elemendi ümber komponent Sticky, mille soovite kleepuvaks muuta. Sel juhul on see päise element.

Lõpuks lisage komponendile Sticky stiilitugi. See asetab päise õigesti.

React-stickynode kasutamine

React-stickynode on veel üks teek, mis aitab teil Reactis kleepuvaid elemente luua.

React-stickynode'i kasutamiseks installige see esmalt:

npm installida reageerida-kleepuvat sõlme

Siis saate seda kasutada järgmiselt:

importida Reageerige alates 'reageerida';
importida Kleepuv alates 'reageerivad kleepuvad sõlmed';
funktsiooniRakendus() {
konst andmed = [ 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 ]
tagasi (
<div>
<Kleepuv lubatud={true} bottomBoundary={1200}>
<div>
 See on kleepuv päis
</div>
</Sticky>
<ul>
 {data.map((x) => {
 tagasi (<li võti={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
eksportidavaikimisi Rakendus;

Alustage komponendi Sticky importimisega react-stickynode teegist.

Seejärel lisage komponent Kleepuv elemendi ümber, mille soovite kleepuvaks muuta. Sel juhul muutke päis kleepuvaks, lisades selle ümber komponendi Sticky.

Lõpuks lisage Sticky komponendile lubatud ja bottomBoundary rekvisiidid. Lubatud tugi tagab, et päis on kleepuv, ja bottomBoundary tugi tagab, et see ei läheks lehel liiga kaugele.

Parandage kasutajakogemust

Kleepuva päise korral võib kasutajal olla lihtne lehe asukohast aru saada. Kleepuvad päised võivad olla eriti problemaatilised mobiilseadmetes, kus ekraan on väiksem.

Kasutajakogemuse parandamiseks saab lisada ka nupu "tagasi üles". Selline nupp võimaldab kasutajal kiiresti lehe ülaossa tagasi kerida. See võib olla eriti kasulik pikkade lehtede puhul.

Kui olete valmis, saate oma Reacti rakenduse GitHubi lehtedel tasuta juurutada.