Home-theater-designers
Vissa webbdesigner använder sig av en rubrik som 'fastnar' längst upp på skärmen när du rullar nedåt. En rubrik som förblir synlig när du rullar kallas ofta en sticky header.
Du kan lägga till en klibbig rubrik på din React-webbplats genom att skriva anpassad kod själv eller genom att använda ett tredjepartsbibliotek.
Vad är en Sticky Header?
En sticky header är en rubrik som förblir fixerad längst upp på skärmen när användaren rullar ner på sidan. Detta kan vara användbart för att hålla viktig information synlig när användaren rullar.
MAKEUSE AV DAGENS VIDEO
Kom dock ihåg att ett stickhuvud minskar mängden skärmfastigheter för din återstående design. Om du använder en sticky header är det en bra idé att hålla den kort.
Skapa en Sticky Header
Det första du behöver göra är att ställa in en onscroll-hanterare. Denna funktion kommer att köras varje gång användaren rullar. Du kan göra detta genom att lägga till en onscroll-händelselyssnare till fönsterobjektet och genom att med hjälp av React-krokar . För att ställa in onscroll-hanteraren måste du använda useEffect-kroken och addEventListener-metoden för window-objektet.
Följande kod skapar en sticky header-komponent och formaterar den med 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;Den här metoden använder inline-styling, men du kan också använda CSS-klasser. Till exempel:
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
Den resulterande sidan kommer att se ut så här:
Ytterligare egenskaper
Det finns några andra saker du kan göra för att göra din sticky header mer användarvänlig. Du kan till exempel lägga till en back-to-top-knapp eller göra rubriken transparent när användaren rullar nedåt.
vissa objekt i papperskorgen kan inte raderas på grund av systemintegritetsskydd.
Du kan använda följande kod för att lägga till en back-to-top-knapp.
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;Den här koden skapar en sticky header-komponent och formaterar den med CSS. Du kan också styla komponenten med Tailwind CSS .
Alternativa metoder
Du kan också använda ett tredjepartsbibliotek för att skapa en klibbig rubrik.
Använder react-sticky
React-sticky-biblioteket hjälper dig att skapa klibbiga element i React. För att använda react-sticky, installera det först:
npm install react-stickySedan kan du använda det så här:
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;I koden ovan måste du först importera StickyContainer- och Sticky-komponenterna från react-sticky-biblioteket.
Sedan måste du lägga till StickyContainer-komponenten runt innehållet som ska innehålla det klibbiga elementet. I det här fallet vill du göra rubriken klibbig i listan som följer den, så lägg till StickyContainer runt de två.
Lägg sedan till Sticky-komponenten runt elementet som du vill göra klibbigt. I det här fallet är det rubrikelementet.
Internet i sig är en smärta
Lägg slutligen till en stilrekvisita till Sticky-komponenten. Detta kommer att placera rubriken korrekt.
Använder react-stickynode
React-stickynode är ett annat bibliotek som hjälper dig att skapa klibbiga element i React.
För att använda react-stickynode, installera den först:
npm install react-stickynodeDå kan du använda det så här:
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;Börja med att importera Sticky-komponenten från react-stickynode-biblioteket.
Lägg sedan till Sticky-komponenten runt elementet som du vill göra klibbigt. I det här fallet gör du rubriken klibbig genom att lägga till Sticky-komponenten runt den.
kopiera musik från ipod till itunes
Lägg slutligen till de aktiverade och nedersta Boundary-rekvisitana till Sticky-komponenten. Den aktiverade rekvisitan kommer att se till att rubriken är klibbig, och bottomBoundary-propellen ser till att den inte går för långt ner på sidan.
Förbättra användarupplevelsen
Med en sticky header kan det vara lätt för användaren att tappa koll på var de befinner sig på sidan. Sticky headers kan vara särskilt problematiskt på mobila enheter, där skärmen är mindre.
För att förbättra användarupplevelsen kan du också lägga till en 'tillbaka till toppen'-knapp. En sådan knapp låter användaren snabbt rulla tillbaka till toppen av sidan. Detta kan vara särskilt användbart på långa sidor.
När du är redo kan du distribuera din React-app gratis på GitHub-sidor.