Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Kai kuriuose svetainių dizainuose naudojama antraštė, kuri „prilimpa“ prie ekrano viršaus, kai slenkate žemyn. Antraštė, kuri lieka matoma slenkant, dažnai vadinama lipnia antrašte.

Galite pridėti lipnią antraštę prie savo „React“ svetainės parašydami pasirinktinį kodą arba naudodami trečiosios šalies biblioteką.

Kas yra lipni antraštė?

Lipni antraštė yra antraštė, kuri lieka pritvirtinta ekrano viršuje, vartotojui slenkant puslapiu žemyn. Tai gali būti naudinga norint, kad svarbi informacija būtų matoma vartotojui slenkant.

Tačiau atminkite, kad antraštė sumažina ekrano nekilnojamojo turto kiekį likusiam dizainui. Jei naudojate lipnią antraštę, patartina ją sutrumpinti.

Lipnios antraštės kūrimas

Pirmas dalykas, kurį turėsite padaryti, tai nustatyti slinkties tvarkyklę. Ši funkcija veiks kiekvieną kartą, kai vartotojas slinks. Tai galite padaryti pridėdami slinkties įvykių klausytoją prie lango objekto ir pagal

instagram viewer
naudojant React kabliukus. Norėdami nustatyti slinkties tvarkyklę, turite naudoti lango objekto „useEffect Hook“ ir „addEventListener“ metodą.

Šis kodas sukuria lipnios antraštės komponentą ir sukuria jo stilių naudojant CSS.

importuoti Reaguoti, { useState, useEffect } iš „reaguoti“;
funkcijaStickyHeader() {
konst [isSticky, setSticky] = useState(klaidinga);
konst handleScroll = () => {
konst windowsScrollTop = langas.scrollY;
 if (windowScrollTop > 10) {
 setSticky(tiesa);
 } Kitas {
 setSticky(klaidinga);
 }
 };
 useEffect(() => {
 window.addEventListener('slinkti', rankenaScroll);
grąžinti () => {
 window.removeEventListener('slinkti', rankenaScroll);
 };
 }, []);
konst elementai = [
 {
 vardas: 'Namai',
 nuoroda: '/'
 },
 {
 vardas: 'Apie',
 nuoroda: '/about'
 },
 {
 vardas: 'kontaktas',
 nuoroda: '/contact'
 }
 ];
konst duomenys = [ 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 ]
grąžinti (
<div className="Programėlė">
<header style={{ background: is Sticky? '#fff': '', plotis: '100%', zIndeksas: '999',pozicija: yra lipni?'fiksuotas':'absoliutus' }}>
 {items.map (elementas => (
<a href={item.link} raktas={item.name}>
 {daikto pavadinimas}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 grįžti (<li raktas={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
eksportuotinumatytas StickyHeader;

Šis metodas naudoja eilutinį stilių, tačiau taip pat galite naudoti CSS klases. Pavyzdžiui:

.lipnus {
 padėtis: fiksuota;
 viršuje: 0;
 plotis: 100%;
 z indeksas: 999;
}

Gautas puslapis atrodys taip:

Papildomos funkcijos

Yra keletas kitų dalykų, kuriuos galite padaryti, kad lipni antraštė būtų patogesnė vartotojui. Pavyzdžiui, galite pridėti mygtuką „atgal į viršų“ arba padaryti antraštę skaidrią, kai vartotojas slenka žemyn.

Galite naudoti šį kodą, kad pridėtumėte mygtuką „atgal į viršų“.

importuoti Reaguoti, { useState, useEffect } iš „reaguoti“;
funkcijaStickyHeader() {
konst [isSticky, setSticky] = useState(klaidinga);
konst [showBackToTop, setShowBackToTop] = useState(klaidinga);
konst handleScroll = () => {
konst windowsScrollTop = langas.scrollY;
 if (windowScrollTop > 10) {
 setSticky(tiesa);
 setShowBackToTop(tiesa);
 } Kitas {
 setSticky(klaidinga);
 setShowBackToTop(klaidinga);
 }
 };
konst scrollToTop = () => {
langas.scrollTo({
 viršuje: 0,
 elgesys: 'sklandžiai'
 });
 };
 useEffect(() => {
 window.addEventListener('slinkti', rankenaScroll);
grąžinti () => {
 window.removeEventListener('slinkti', rankenaScroll);
 };
 }, []);
konst elementai = [
 {
 vardas: 'Namai',
 nuoroda: '/'
 },
 {
 vardas: 'Apie',
 nuoroda: '/about'
 },
 {
 vardas: 'kontaktas',
 nuoroda: '/contact'
 }
 ];
konst duomenys = [ 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 ]
grąžinti (
<div className="Programėlė">
<header style={{ background: is Sticky? '#fff': '', plotis: '100%', zIndeksas: '999',pozicija: yra lipni?'fiksuotas':'absoliutus' }}>
 {items.map (elementas => (
<a href={item.link} raktas={item.name}>
 {daikto pavadinimas}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 grįžti (<li raktas={x}>{x}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<mygtukas onClick={scrollToTop}>Atgal į viršų</button>
 )}</div>
</div>
 );
}
eksportuotinumatytas StickyHeader;

Šis kodas sukuria lipnios antraštės komponentą ir formuoja jį naudojant CSS. Tu taip pat gali stilizuokite komponentą naudodami Tailwind CSS.

Alternatyvūs metodai

Taip pat galite naudoti trečiosios šalies biblioteką, kad sukurtumėte lipnią antraštę.

Naudojant react-sticky

„React“ lipni biblioteka padeda sukurti „React“ lipnius elementus. Jei norite naudoti „react-sticky“, pirmiausia įdiekite:

npm diegti reaguoja-lipnus

Tada galite jį naudoti taip:

importuoti Reaguoti iš „reaguoti“;
importuoti { StickyContainer, Sticky } iš „reaguoja-lipnus“;
funkcijaProgramėlė() {
konst duomenys = [ 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 ]
grąžinti (
<div>
<Lipnus konteineris>
<Lipnus>{({ stilius }) => (
<header style={style}>
 Tai yra lipni antraštė
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 grįžti (<li raktas={x}>{x}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
eksportuotinumatytas Programėlė;

Pirmiau pateiktame kode pirmiausia turite importuoti „StickyContainer“ ir „Sticky“ komponentus iš „React-Sticky“ bibliotekos.

Tada aplink turinį, kuriame turėtų būti lipnus elementas, turite pridėti „StickyContainer“ komponentą. Tokiu atveju norite, kad antraštė būtų lipni po jos esančiame sąraše, todėl aplink juos pridėkite „StickyContainer“.

Tada pridėkite lipnųjį komponentą aplink elementą, kurį norite padaryti lipnų. Šiuo atveju tai yra antraštės elementas.

Galiausiai pridėkite stiliaus rekvizitus prie „Sticky“ komponento. Taip antraštė bus tinkamai išdėstyta.

Naudojant react-stickynode

„React-stickynode“ yra dar viena biblioteka, padedanti sukurti „React“ lipnius elementus.

Norėdami naudoti react-stickynode, pirmiausia įdiekite jį:

npm diegti reaguoja-lipni mazgas

Tada galite jį naudoti taip:

importuoti Reaguoti iš „reaguoti“;
importuoti Lipnus iš „reagavimo lipnus mazgas“;
funkcijaProgramėlė() {
konst duomenys = [ 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 ]
grąžinti (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
 Tai yra lipni antraštė
</div>
</Sticky>
<ul>
 {data.map((x) => {
 grįžti (<li raktas={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
eksportuotinumatytas Programėlė;

Pradėkite importuodami Sticky komponentą iš react-stickynode bibliotekos.

Tada pridėkite lipnųjį komponentą aplink elementą, kurį norite padaryti lipnų. Tokiu atveju antraštę paverskite lipnia, aplink ją pridėdami komponentą Sticky.

Galiausiai prie „Sticky“ komponento pridėkite įgalintą ir „downBoundary“ rekvizitus. Įjungtas atramas užtikrins, kad antraštė būtų lipni, o apatinės ribos atrama užtikrins, kad ji nenusileistų per daug žemyn.

Pagerinkite vartotojo patirtį

Naudojant lipnią antraštę, vartotojas gali lengvai pamiršti, kur yra puslapyje. Lipnios antraštės gali būti ypač problemiškos mobiliuosiuose įrenginiuose, kur ekranas yra mažesnis.

Norėdami pagerinti vartotojo patirtį, taip pat galite pridėti mygtuką „atgal į viršų“. Toks mygtukas leidžia vartotojui greitai slinkti atgal į puslapio viršų. Tai gali būti ypač naudinga ilguose puslapiuose.

Kai būsite pasiruošę, galite nemokamai įdiegti „React“ programą „GitHub“ puslapiuose.