Home-theater-designers
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.
DIENAS VIDEO MAKEUSEOF
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 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.
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;Šī metode izmanto iekļauto stilu, taču varat izmantot arī CSS klases. Piemēram:
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 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.
labākais bezmaksas mūzikas atskaņotājs android
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;Š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 install react-stickyPēc tam varat to izmantot šādi:
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;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 install react-stickynodeTad jūs varat to izmantot šādi:
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;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.