Một số thiết kế trang web sử dụng tiêu đề “dính” vào đầu màn hình khi bạn cuộn xuống. Tiêu đề vẫn hiển thị khi bạn cuộn thường được gọi là tiêu đề cố định.
Bạn có thể thêm tiêu đề cố định vào trang React của mình bằng cách tự viết mã tùy chỉnh hoặc sử dụng thư viện của bên thứ ba.
Tiêu đề cố định là tiêu đề cố định ở đầu màn hình khi người dùng cuộn xuống trang. Điều này có thể hữu ích để giữ thông tin quan trọng hiển thị khi người dùng cuộn.
Tuy nhiên, hãy nhớ rằng tiêu đề thanh sẽ làm giảm diện tích màn hình cho thiết kế còn lại của bạn. Nếu bạn sử dụng tiêu đề cố định, bạn nên giữ tiêu đề ngắn gọn.
Điều đầu tiên bạn cần làm là thiết lập một trình xử lý onscroll. Chức năng này sẽ chạy mỗi khi người dùng cuộn. Bạn có thể làm điều này bằng cách thêm một trình lắng nghe sự kiện onscroll vào đối tượng cửa sổ và bằng cách sử dụng các hook React. Để thiết lập trình xử lý cuộn, bạn cần sử dụng hook useEffect và phương thức addEventListener của đối tượng cửa sổ.
Đoạn mã sau tạo thành phần tiêu đề cố định và tạo kiểu cho nó bằng 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=>
{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;Phương pháp này sử dụng kiểu dáng nội tuyến, nhưng bạn cũng có thể sử dụng các lớp CSS. Ví dụ:
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
Trang kết quả sẽ trông như thế này:
.jpg?q=50&fit=crop&w=1500&dpr=1.5)
Tính năng bổ sung
Bạn có thể thực hiện một số việc khác để làm cho tiêu đề cố định của mình thân thiện hơn với người dùng. Ví dụ: bạn có thể thêm nút quay lại đầu trang hoặc làm cho tiêu đề trong suốt khi người dùng cuộn xuống.
Bạn có thể sử dụng đoạn mã sau để thêm nút quay lại đầu trang.
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=>
{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;
Mã này tạo thành phần tiêu đề cố định và tạo kiểu cho nó bằng CSS. Bạn cũng có thể tạo kiểu cho thành phần bằng Tailwind CSS.
phương pháp thay thế
Bạn cũng có thể sử dụng thư viện của bên thứ ba để tạo tiêu đề cố định.
Sử dụng chất dính phản ứng
Thư viện Reac-sticky giúp bạn tạo các phần tử dính trong React. Để sử dụng Reac-stick, trước tiên hãy cài đặt nó:
npm install react-stickySau đó, bạn có thể sử dụng nó như thế này:
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;
Trong đoạn mã trên, trước tiên bạn cần nhập các thành phần StickyContainer và Sticky từ thư viện Reac-sticky.
Sau đó, bạn cần thêm thành phần StickyContainer xung quanh nội dung chứa phần tử dính. Trong trường hợp này, bạn muốn làm cho tiêu đề cố định trong danh sách theo sau nó, vì vậy hãy thêm StickyContainer xung quanh hai tiêu đề.
Tiếp theo, thêm thành phần dính xung quanh thành phần mà bạn muốn tạo nếp. Trong trường hợp này, đó là phần tử tiêu đề.
Cuối cùng, thêm một style prop vào thành phần Sticky. Điều này sẽ định vị tiêu đề chính xác.
Sử dụng Reac-stickynode
React-stickynode là một thư viện khác giúp bạn tạo các phần tử cố định trong React.
Để sử dụng Reac-stickynode, trước tiên hãy cài đặt nó:
npm install react-stickynodeSau đó, bạn có thể sử dụng nó như thế này:
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ắt đầu bằng cách nhập thành phần Sticky từ thư viện Reac-stickynode.
Sau đó, thêm thành phần dính xung quanh thành phần mà bạn muốn tạo nếp. Trong trường hợp này, hãy làm cho tiêu đề dính bằng cách thêm thành phần Sticky xung quanh nó.
Cuối cùng, thêm các props đã bật và bottomBoundary vào thành phần Sticky. Chỗ dựa được kích hoạt sẽ đảm bảo rằng tiêu đề được cố định và chỗ dựa bottomBoundary sẽ đảm bảo rằng nó không đi quá xa xuống cuối trang.
Cải thiện trải nghiệm người dùng
Với tiêu đề cố định, người dùng có thể dễ dàng mất dấu họ đang ở đâu trên trang. Tiêu đề dính có thể đặc biệt khó khăn trên thiết bị di động có màn hình nhỏ hơn.
Để cải thiện trải nghiệm người dùng, bạn cũng có thể thêm nút “quay lại đầu trang”. Một nút như vậy cho phép người dùng nhanh chóng cuộn trở lại đầu trang. Điều này có thể đặc biệt hữu ích trên các trang dài.
Khi bạn đã sẵn sàng, bạn có thể triển khai miễn phí ứng dụng React của mình trên Trang GitHub.
