Home-theater-designers
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.
nézz youtube videókat bejelentkezés nélkül
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.
MAKEUSEOF A NAP VIDEÓJA
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 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 } from 'react';
function StickyHeader() {
const [isSticky, setSticky] = useState(false);
const handleScroll = () => {
const windowScrollTop = window.scrollY;
if (windowScrollTop > 10) {
setSticky(true);
} else {
setSticky(false);
}
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
const items = [
{
name: 'Home',
link: '/'
},
{
name: 'About',
link: '/about'
},
{
name: 'Contact',
link: '/contact'
}
];
const 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 ]
return (
<div className="App">
<header style={{ background: isSticky ? '#fff' : '', width: '100%', zIndex: '999',position:isSticky ?'fixed':'absolute' }}>
{items.map(item => (
<a href={item.link} key={item.name}>
{item.name}
</a>
))}
</header>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
</div>
);
}
export default StickyHeader;Ez a módszer beépített stílust használ, de használhat CSS osztályokat is. Például:
.sticky {
position: fixed;
top: 0;
width: 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 } from 'react';
function StickyHeader() {
const [isSticky, setSticky] = useState(false);
const [showBackToTop, setShowBackToTop] = useState(false);
const handleScroll = () => {
const windowScrollTop = window.scrollY;
if (windowScrollTop > 10) {
setSticky(true);
setShowBackToTop(true);
} else {
setSticky(false);
setShowBackToTop(false);
}
};
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
const items = [
{
name: 'Home',
link: '/'
},
{
name: 'About',
link: '/about'
},
{
name: 'Contact',
link: '/contact'
}
];
const 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 ]
return (
<div className="App">
<header style={{ background: isSticky ? '#fff' : '', width: '100%', zIndex: '999',position:isSticky ?'fixed':'absolute' }}>
{items.map(item => (
<a href={item.link} key={item.name}>
{item.name}
</a>
))}
</header>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
<div>
{showBackToTop && (
<button onClick={scrollToTop}>Back to top</button>
)}</div>
</div>
);
}
export default 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 install react-stickyEzután a következőképpen használhatja:
import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';
function App() {
const 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 ]
return (
<div>
<StickyContainer>
<Sticky>{({ style }) => (
<header style={style}>
This is a sticky header
</header>
)}
</Sticky>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
</StickyContainer>
</div>
);
}
export default 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.
hogyan lehet bat fájlt készíteni
A react-stickynode használatához először telepítse:
npm install react-stickynodeAkkor így használhatod:
import React from 'react';
import Sticky from 'react-stickynode';
function App() {
const 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 ]
return (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
This is a sticky header
</div>
</Sticky>
<ul>
{data.map((x) => {
return (<li key={x}>{x}</li>)
})}
</ul>
</div>
);
}
export default 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.