Home-theater-designers
일부 웹사이트 디자인은 아래로 스크롤할 때 화면 상단에 '고정'되는 헤더를 사용합니다. 스크롤할 때 계속 표시되는 머리글을 종종 고정 머리글이라고 합니다.
사용자 지정 코드를 직접 작성하거나 타사 라이브러리를 사용하여 React 사이트에 고정 헤더를 추가할 수 있습니다.
고정 헤더란 무엇입니까?
고정 헤더는 사용자가 페이지를 아래로 스크롤할 때 화면 상단에 고정된 상태로 유지되는 헤더입니다. 이는 사용자가 스크롤할 때 중요한 정보를 계속 표시하는 데 유용할 수 있습니다.
맥은 와이파이에 연결할 수 없습니다오늘의 메이크업 비디오
그러나 스틱 헤더는 나머지 디자인의 화면 공간을 줄여준다는 점을 명심하십시오. 고정 헤더를 사용하는 경우 짧게 유지하는 것이 좋습니다.
고정 헤더 만들기
가장 먼저 해야 할 일은 onscroll 핸들러를 설정하는 것입니다. 이 기능은 사용자가 스크롤할 때마다 실행됩니다. window 객체에 onscroll 이벤트 리스너를 추가하고 반응 후크 사용 . onscroll 핸들러를 설정하려면 useEffect 후크와 창 객체의 addEventListener 메서드를 사용해야 합니다.
다음 코드는 고정 헤더 구성 요소를 만들고 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;이 방법은 인라인 스타일을 사용하지만 CSS 클래스를 사용할 수도 있습니다. 예를 들어:
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
결과 페이지는 다음과 같습니다.
추가 기능
고정 헤더를 보다 사용자 친화적으로 만들기 위해 할 수 있는 몇 가지 다른 작업이 있습니다. 예를 들어 맨 위로 이동 버튼을 추가하거나 사용자가 아래로 스크롤할 때 머리글을 투명하게 만들 수 있습니다.
다음 코드를 사용하여 맨 위로 이동 버튼을 추가할 수 있습니다.
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;이 코드는 고정 헤더 구성 요소를 만들고 CSS를 사용하여 스타일을 지정합니다. 당신은 또한 수 Tailwind CSS를 사용하여 구성 요소 스타일 지정 .
대체 방법
타사 라이브러리를 사용하여 고정 헤더를 만들 수도 있습니다.
Gmail을 이전 스타일로 다시 변경
react-sticky 사용
react-sticky 라이브러리는 React에서 고정 요소를 만드는 데 도움이 됩니다. react-sticky를 사용하려면 먼저 설치하십시오.
npm install react-sticky그런 다음 다음과 같이 사용할 수 있습니다.
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;위의 코드에서는 먼저 react-sticky 라이브러리에서 StickyContainer 및 Sticky 구성 요소를 가져와야 합니다.
그런 다음 고정 요소를 포함해야 하는 콘텐츠 주변에 StickyContainer 구성 요소를 추가해야 합니다. 이 경우 뒤에 오는 목록 내에서 헤더를 고정시키려고 하므로 두 헤더 주위에 StickyContainer를 추가합니다.
다음으로 고정하려는 요소 주위에 고정 구성 요소를 추가합니다. 이 경우 헤더 요소입니다.
마지막으로 Sticky 구성 요소에 스타일 소품을 추가합니다. 이렇게 하면 헤더가 올바르게 배치됩니다.
react-stickynode 사용
React-stickynode는 React에서 고정 요소를 만드는 데 도움이 되는 또 다른 라이브러리입니다.
react-stickynode를 사용하려면 먼저 설치하십시오.
npm install react-stickynode그런 다음 다음과 같이 사용할 수 있습니다.
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;react-stickynode 라이브러리에서 Sticky 구성 요소를 가져오는 것으로 시작합니다.
마이크로소프트 오피스를 구매하는 가장 좋은 방법
그런 다음 고정하려는 요소 주위에 고정 구성 요소를 추가합니다. 이 경우 헤더 주변에 Sticky 구성 요소를 추가하여 헤더를 고정시킵니다.
마지막으로 활성화 및 bottomBoundary 소품을 Sticky 구성 요소에 추가합니다. 활성화된 소품은 헤더가 고정되어 있는지 확인하고 bottomBoundary 소품은 페이지에서 너무 멀리 떨어지지 않도록 합니다.
사용자 경험 개선
고정 헤더를 사용하면 사용자가 페이지의 위치를 쉽게 파악할 수 있습니다. 고정 헤더는 화면이 더 작은 모바일 장치에서 특히 문제가 될 수 있습니다.
사용자 경험을 개선하기 위해 '맨 위로 돌아가기' 버튼을 추가할 수도 있습니다. 이러한 버튼을 사용하면 사용자가 페이지 상단으로 빠르게 스크롤할 수 있습니다. 이는 긴 페이지에서 특히 유용할 수 있습니다.
준비가 되면 GitHub 페이지에서 무료로 React 앱을 배포할 수 있습니다.