Добавьте постоянный заголовок в дизайн вашей страницы с помощью одной из этих простых техник
В дизайне некоторых сайтов используется заголовок, который ‘прилипает’ к верхней части экрана при прокрутке вниз. Заголовок, который остается видимым при прокрутке, часто называют ‘липким’ заголовком
Вы можете добавить липкий заголовок на свой сайт React, написав пользовательский код самостоятельно или используя стороннюю библиотеку
Что такое липкий заголовок?
Липкий заголовок – это заголовок, который остается закрепленным в верхней части экрана по мере того, как пользователь прокручивает страницу вниз. Это может быть полезно для сохранения важной информации в поле зрения пользователя при прокрутке страницы
Однако имейте в виду, что липкий заголовок уменьшает площадь экрана для остального дизайна. Если вы используете липкий заголовок, то лучше сделать его коротким
Создание липкого заголовка
Первое, что вам нужно сделать, это настроить обработчик onscroll. Эта функция будет выполняться каждый раз, когда пользователь прокручивает страницу. Это можно сделать, добавив слушатель события onscroll к объекту окна и используя хуки React. Чтобы настроить обработчик 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
Альтернативные методы
Вы также можете использовать стороннюю библиотеку для создания липкого заголовка
Использование 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;
В приведенном выше коде сначала нужно импортировать компоненты StickyContainer и Sticky из библиотеки react-sticky
Затем нужно добавить компонент StickyContainer вокруг содержимого, которое должно содержать липкий элемент. В данном случае вы хотите сделать заголовок липким в списке, который следует за ним, поэтому добавьте StickyContainer вокруг этих двух элементов
Затем добавьте компонент Sticky вокруг элемента, который вы хотите сделать липким. В данном случае это элемент заголовка
Наконец, добавьте к компоненту Sticky параметр style prop. Это позволит правильно расположить заголовок
Использование 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;
Начните с импорта компонента Sticky из библиотеки react-stickynode
Затем добавьте компонент Sticky вокруг элемента, который вы хотите сделать липким. В этом случае сделайте заголовок липким, добавив вокруг него компонент Sticky
Наконец, добавьте реквизиты enabled и bottomBoundary к компоненту Sticky. Реквизит enabled будет гарантировать, что заголовок будет липким, а реквизит bottomBoundary будет гарантировать, что он не уйдет слишком далеко вниз по странице
Улучшение пользовательского опыта
С липким заголовком пользователь может легко потерять представление о том, где он находится на странице. Липкие заголовки могут быть особенно проблематичны на мобильных устройствах, где экран меньше
Для улучшения пользовательского опыта можно также добавить кнопку ‘вернуться к началу’. Такая кнопка позволяет пользователю быстро прокрутить страницу назад к началу страницы. Это может быть особенно полезно на длинных страницах
Когда вы будете готовы, вы можете бесплатно развернуть свое приложение React на GitHub Pages
Комментировать