Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Dažu vietņu dizainā tiek izmantota galvene, kas "pielīp" ekrāna augšdaļā, ritinot uz leju. Galveni, kas paliek redzama ritināšanas laikā, bieži sauc par lipīgo galveni.

Varat savai React vietnei pievienot lipīgu galveni, pats rakstot pielāgotu kodu vai izmantojot trešās puses bibliotēku.

Kas ir lipīga galvene?

Lipīga galvene ir galvene, kas paliek fiksēta ekrāna augšdaļā, kad lietotājs ritina lapu uz leju. Tas var būt noderīgi, lai lietotājam ritinot saglabātu svarīgu informāciju.

Tomēr ņemiet vērā, ka nūjas galvene samazina ekrāna nekustamo īpašumu apjomu jūsu atlikušajam dizainam. Ja izmantojat lipīgu galveni, ieteicams to īsi.

Lipīgās galvenes izveide

Pirmā lieta, kas jums jādara, ir iestatīt ritināšanas apdarinātāju. Šī funkcija darbosies katru reizi, kad lietotājs ritinās. To var izdarīt, loga objektam pievienojot ritināšanas notikumu uztvērēju un pēc

instagram viewer
izmantojot React āķus. Lai iestatītu ritināšanas apdarinātāju, loga objektam ir jāizmanto useEffect hook un addEventListener metode.

Šis kods izveido lipīgu galvenes komponentu un veido to, izmantojot CSS.

imports Reaģēt, { useState, useEffect } no "reaģēt";
funkcijuStickyHeader() {
konst [isSticky, setSticky] = useState(viltus);
konst handScroll = () => {
konst windowsScrollTop = logs.scrollY;
 if (windowScrollTop > 10) {
 setSticky(taisnība);
 } cits {
 setSticky(viltus);
 }
 };
 useEffect(() => {
 window.addEventListener('ritiniet', rokturisScroll);
atgriezties () => {
 window.removeEventListener('ritiniet', rokturisScroll);
 };
 }, []);
konst preces = [
 {
 nosaukums: 'Mājas',
 saite: '/'
 },
 {
 nosaukums: 'Par',
 saite: '/about'
 },
 {
 nosaukums: 'Sazināties',
 saite: '/contact'
 }
 ];
konst dati = [ 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 ]
atgriezties (
<div klasesNosaukums="App">
<header style={{ fons: ir lipīgs? '#fff': '', platums: '100%', zIndekss: '999',pozīcija: ir lipīga?'fiksēts':'absolūts' }}>
 {items.map (item => (
<a href={item.link} atslēga={vienums.nosaukums}>
 {priekšmeta nosaukums}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 atgriezties (<li key={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
eksportētnoklusējuma StickyHeader;

Šī metode izmanto iekļauto stilu, taču varat izmantot arī CSS klases. Piemēram:

.lipīgs {
 pozīcija: fiksēta;
 augšā: 0;
 platums: 100%;
 z-indekss: 999;
}

Iegūtā lapa izskatīsies šādi:

Papildus iespējas

Ir vēl dažas lietas, ko varat darīt, lai padarītu savu lipīgo galveni lietotājam draudzīgāku. Piemēram, varat pievienot pogu “Atgriezties uz augšu” vai padarīt galveni caurspīdīgu, kad lietotājs ritina uz leju.

Varat izmantot tālāk norādīto kodu, lai pievienotu pogu atpakaļ uz augšu.

imports Reaģēt, { useState, useEffect } no "reaģēt";
funkcijuStickyHeader() {
konst [isSticky, setSticky] = useState(viltus);
konst [showBackToTop, setShowBackToTop] = useState(viltus);
konst handScroll = () => {
konst windowsScrollTop = logs.scrollY;
 if (windowScrollTop > 10) {
 setSticky(taisnība);
 setShowBackToTop(taisnība);
 } cits {
 setSticky(viltus);
 setShowBackToTop(viltus);
 }
 };
konst scrollToTop = () => {
logs.scrollTo({
 augšā: 0,
 uzvedība: 'gluda'
 });
 };
 useEffect(() => {
 window.addEventListener('ritiniet', rokturisScroll);
atgriezties () => {
 window.removeEventListener('ritiniet', rokturisScroll);
 };
 }, []);
konst preces = [
 {
 nosaukums: 'Mājas',
 saite: '/'
 },
 {
 nosaukums: 'Par',
 saite: '/about'
 },
 {
 nosaukums: 'Sazināties',
 saite: '/contact'
 }
 ];
konst dati = [ 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 ]
atgriezties (
<div klasesNosaukums="App">
<header style={{ fons: ir lipīgs? '#fff': '', platums: '100%', zIndekss: '999',pozīcija: ir lipīga?'fiksēts':'absolūts' }}>
 {items.map (item => (
<a href={item.link} atslēga={vienums.nosaukums}>
 {priekšmeta nosaukums}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 atgriezties (<li key={x}>{x}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<poga onClick={scrollToTop}>Atpakaļ uz augšu</button>
 )}</div>
</div>
 );
}
eksportētnoklusējuma StickyHeader;

Šis kods izveido lipīgu galvenes komponentu un veido to, izmantojot CSS. Jūs varat arī veidojiet komponentu, izmantojot Tailwind CSS.

Alternatīvās metodes

Varat arī izmantot trešās puses bibliotēku, lai izveidotu lipīgu galveni.

React-sticky izmantošana

React-sticky bibliotēka palīdz izveidot lipīgos elementus programmā React. Lai izmantotu react-sticky, vispirms instalējiet to:

npm uzstādīt reaģē-lipīgs

Pēc tam varat to izmantot šādi:

imports Reaģēt no "reaģēt";
imports { StickyContainer, Sticky } no 'reaģēt-lipīgs';
funkcijuApp() {
konst dati = [ 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 ]
atgriezties (
<div>
<StickyContainer>
<Lipīga>{({ stils }) => (
<header style={style}>
 Šis ir lipīga galvene
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 atgriezties (<li key={x}>{x}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
eksportētnoklusējuma Lietotne;

Iepriekš minētajā kodā vispirms ir jāimportē StickyContainer un Sticky komponenti no react-sticky bibliotēkas.

Pēc tam jums ir jāpievieno komponents StickyContainer ap saturu, kurā jāiekļauj lipīgais elements. Šādā gadījumā vēlaties padarīt galveni lipīgu sarakstā, kas tai seko, tāpēc pievienojiet StickyContainer ap tiem diviem.

Pēc tam pievienojiet elementu Sticky ap elementu, kuru vēlaties padarīt lipīgu. Šajā gadījumā tas ir galvenes elements.

Visbeidzot pievienojiet Sticky komponentam stila rekvizītu. Tādējādi virsraksts tiks novietots pareizi.

Izmantojot react-stickynode

React-stickynode ir vēl viena bibliotēka, kas palīdz izveidot lipīgos elementus programmā React.

Lai izmantotu react-stickynode, vispirms instalējiet to:

npm uzstādīt reaģēt-lipīgs mezgls

Tad jūs varat to izmantot šādi:

imports Reaģēt no "reaģēt";
imports Lipīga no 'reaģēt-lipīgs mezgls';
funkcijuApp() {
konst dati = [ 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 ]
atgriezties (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
 Šis ir lipīga galvene
</div>
</Sticky>
<ul>
 {data.map((x) => {
 atgriezties (<li key={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
eksportētnoklusējuma Lietotne;

Sāciet ar komponenta Sticky importēšanu no react-stickynode bibliotēkas.

Pēc tam pievienojiet elementu Sticky ap elementu, kuru vēlaties padarīt lipīgu. Šādā gadījumā padariet galveni lipīgu, pievienojot tai komponentu Sticky.

Visbeidzot pievienojiet iespējoto un bottomBoundary rekvizītus Sticky komponentam. Iespējotais atbalsts nodrošinās, ka galvene ir lipīga, un apakšējās robežas atbalsts nodrošinās, ka tas nenonāk pārāk tālu lapā.

Uzlabojiet lietotāja pieredzi

Izmantojot lipīgo galveni, lietotājs var viegli zaudēt informāciju par to, kur viņš atrodas lapā. Lipīgās galvenes var būt īpaši problemātiskas mobilajās ierīcēs, kur ekrāns ir mazāks.

Lai uzlabotu lietotāja pieredzi, varat pievienot arī pogu "Atpakaļ uz augšu". Šāda poga ļauj lietotājam ātri ritināt atpakaļ uz lapas augšdaļu. Tas var būt īpaši noderīgi garās lapās.

Kad esat gatavs, varat bez maksas izvietot savu React lietotni GitHub lapās.