Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

Egyes webhelytervek fejlécet használnak, amely a képernyő tetejére "ragad", amikor lefelé görget. A görgetés közben látható fejlécet gyakran ragadós fejlécnek nevezik.

Hozzáadhat ragadós fejlécet a React webhelyéhez, ha saját maga ír be egyéni kódot, vagy használ egy harmadik féltől származó könyvtárat.

Mi az a ragadós fejléc?

A ragadós fejléc olyan fejléc, amely a képernyő tetején marad, miközben a felhasználó lefelé görget az oldalon. Ez hasznos lehet a fontos információk láthatóvá tételéhez, amikor a felhasználó görget.

Ne feledje azonban, hogy a ragadós fejléc csökkenti a képernyőn lévő ingatlanok mennyiségét a fennmaradó kialakításhoz. Ha ragadós fejlécet használ, célszerű röviden tartani.

Ragadós fejléc létrehozása

Az első dolog, amit meg kell tennie, be kell állítania egy onscroll kezelőt. Ez a funkció minden alkalommal fut, amikor a felhasználó görget. Ezt úgy teheti meg, hogy egy onscroll eseményfigyelőt ad hozzá az ablak objektumhoz, és by

instagram viewer
React horgok segítségével. Az onscroll-kezelő beállításához az ablakobjektum useEffect hook-ját és az addEventListener metódust kell használnia.

A következő kód egy ragadós fejléckomponenst hoz létre, és CSS használatával stílusozza azt.

import React, { useState, useEffect } tól től 'reagál';
funkcióStickyHeader() {
const [isSticky, setSticky] = useState(hamis);
const handleScroll = () => {
const windowsScrollTop = ablak.scrollY;
 if (windowScrollTop > 10) {
 setSticky(igaz);
 } más {
 setSticky(hamis);
 }
 };
 useEffect(() => {
 window.addEventListener('tekercs', handleScroll);
Visszatérés () => {
 window.removeEventListener('tekercs', handleScroll);
 };
 }, []);
const tételek = [
 {
 név: 'itthon',
 link: '/'
 },
 {
 név: 'Ról ről',
 link: '/about'
 },
 {
 név: 'Kapcsolatba lépni',
 link: '/contact'
 }
 ];
const adatok = [ 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 ]
Visszatérés (
<div className="App">
<header style={{ background: isSticky? '#fff': '', szélesség: '100%', zIndex: '999',pozíció: isSticky ?'rögzített':'abszolút' }}>
 {items.map (elem => (
<a href={cikk.link} kulcs={cikk.név}>
 {termék név}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 Visszatérés (<li kulcs={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
exportalapértelmezett StickyHeader;

Ez a módszer beépített stílust használ, de használhat CSS osztályokat is. Például:

.ragadós {
 pozíció: rögzített;
 felső: 0;
 szélesség: 100%;
 z-index: 999;
}

A kapott oldal így fog kinézni:

További jellemzők

Van még néhány dolog, amit megtehet a ragadós fejléc felhasználóbarátabbá tétele érdekében. Például hozzáadhat egy vissza a tetejére gombot, vagy átlátszóvá teheti a fejlécet, amikor a felhasználó lefelé görget.

A következő kóddal hozzáadhat egy back-to-top gombot.

import React, { useState, useEffect } tól től 'reagál';
funkcióStickyHeader() {
const [isSticky, setSticky] = useState(hamis);
const [showBackToTop, setShowBackToTop] = useState(hamis);
const handleScroll = () => {
const windowsScrollTop = ablak.scrollY;
 if (windowScrollTop > 10) {
 setSticky(igaz);
 setShowBackToTop(igaz);
 } más {
 setSticky(hamis);
 setShowBackToTop(hamis);
 }
 };
const scrollToTop = () => {
ablak.scrollTo({
 felső: 0,
 viselkedés: 'sima'
 });
 };
 useEffect(() => {
 window.addEventListener('tekercs', handleScroll);
Visszatérés () => {
 window.removeEventListener('tekercs', handleScroll);
 };
 }, []);
const tételek = [
 {
 név: 'itthon',
 link: '/'
 },
 {
 név: 'Ról ről',
 link: '/about'
 },
 {
 név: 'Kapcsolatba lépni',
 link: '/contact'
 }
 ];
const adatok = [ 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 ]
Visszatérés (
<div className="App">
<header style={{ background: isSticky? '#fff': '', szélesség: '100%', zIndex: '999',pozíció: isSticky ?'rögzített':'abszolút' }}>
 {items.map (elem => (
<a href={cikk.link} kulcs={cikk.név}>
 {termék név}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 Visszatérés (<li kulcs={x}>{x}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<gomb onClick={scrollToTop}>Vissza a tetejére</button>
 )}</div>
</div>
 );
}
exportalapértelmezett StickyHeader;

Ez a kód ragadós fejléckomponenst hoz létre, és CSS használatával stílusozza azt. Te is a komponens stílusát a Tailwind CSS használatával.

Alternatív módszerek

Használhat harmadik féltől származó könyvtárat is ragadós fejléc létrehozásához.

React-sticky használata

A react-sticky könyvtár segít ragadós elemek létrehozásában a React alkalmazásban. A react-sticky használatához először telepítse:

npm telepítés reagál-ragadós

Ezután a következőképpen használhatja:

import Reagál tól től 'reagál';
import { StickyContainer, Sticky } tól től „reagálós”;
funkcióApp() {
const adatok = [ 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 ]
Visszatérés (
<div>
<StickyContainer>
<Ragadós>{({ stílus }) => (
<header style={style}>
 Ez van ragadós fejléc
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 Visszatérés (<li kulcs={x}>{x}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
exportalapértelmezett App;

A fenti kódban először importálnia kell a StickyContainer és a Sticky összetevőket a react-sticky könyvtárból.

Ezután hozzá kell adnia a StickyContainer összetevőt a ragadós elemet tartalmazó tartalom köré. Ebben az esetben ragadóssá szeretné tenni a fejlécet az azt követő listán belül, ezért adja hozzá a StickyContainert a kettő köré.

Ezután adja hozzá a ragadós összetevőt a ragacsossá tenni kívánt elem köré. Ebben az esetben ez a fejléc elem.

Végül adjunk hozzá stílust a Sticky komponenshez. Ez a fejlécet megfelelően helyezi el.

React-stickynode használata

A React-stickynode egy másik könyvtár, amely segít ragadós elemek létrehozásában a React alkalmazásban.

A react-stickynode használatához először telepítse:

npm telepítés react-stickynode

Akkor így használhatod:

import Reagál tól től 'reagál';
import Ragadós tól től „react-stickynode”;
funkcióApp() {
const adatok = [ 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 ]
Visszatérés (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
 Ez van ragadós fejléc
</div>
</Sticky>
<ul>
 {data.map((x) => {
 Visszatérés (<li kulcs={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
exportalapértelmezett App;

Kezdje a Sticky komponens importálásával a react-stickynode könyvtárból.

Ezután adja hozzá a ragadós komponenst a ragadóssá kívánt elem köré. Ebben az esetben tegye ragadóssá a fejlécet a Sticky komponens hozzáadásával.

Végül adja hozzá az engedélyezett és a bottomBoundary kellékeket a Sticky komponenshez. Az engedélyezett prop gondoskodik arról, hogy a fejléc ragadós legyen, a bottomBoundary prop gondoskodik arról, hogy ne menjen túl messzire az oldalon.

Javítsa a felhasználói élményt

A ragadós fejléc révén a felhasználó könnyen elveszítheti a nyomát, hogy hol tartózkodik az oldalon. A ragadós fejlécek különösen problémásak lehetnek mobileszközökön, ahol a képernyő kisebb.

A felhasználói élmény javítása érdekében hozzáadhat egy „vissza a tetejére” gombot is. Egy ilyen gomb segítségével a felhasználó gyorsan visszagörgethet az oldal tetejére. Ez különösen hosszú oldalakon lehet hasznos.

Ha készen áll, ingyenesen üzembe helyezheti React alkalmazását a GitHub oldalakon.