Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

Некоторые дизайны веб-сайтов используют заголовок, который «прилипает» к верхней части экрана при прокрутке вниз. Заголовок, который остается видимым при прокрутке, часто называют липким заголовком.

Вы можете добавить липкий заголовок на свой сайт React, написав собственный код самостоятельно или используя стороннюю библиотеку.

Что такое липкий заголовок?

Липкий заголовок — это заголовок, который остается фиксированным в верхней части экрана, когда пользователь прокручивает страницу вниз. Это может быть полезно для отображения важной информации при прокрутке пользователем.

Имейте в виду, однако, что заголовок палки уменьшает количество экранного пространства для оставшегося дизайна. Если вы используете липкий заголовок, лучше сделать его коротким.

Создание липкого заголовка

Первое, что вам нужно сделать, это настроить обработчик onscroll. Эта функция будет запускаться каждый раз, когда пользователь прокручивает страницу. Вы можете сделать это, добавив прослушиватель событий onscroll к объекту окна и

instagram viewer
использование хуков React. Чтобы настроить обработчик onscroll, вам нужно использовать хук useEffect и метод addEventListener объекта окна.

Следующий код создает липкий компонент заголовка и стилизует его с помощью CSS.

Импортировать Реагировать, {useState, useEffect} от 'реагировать';
функциялипкий заголовок() {
константа [isSticky, setSticky] = useState(ЛОЖЬ);
константа handleScroll = () => {
константа ОкноПрокруткаВерх = окно.прокрутка;
 если (windowScrollTop > 10) {
 установитьSticky(истинный);
 } еще {
 установитьSticky(ЛОЖЬ);
 }
 };
 использовать эффект (() => {
 window.addEventListener('прокрутить', ручка прокрутки);
возвращаться () => {
 window.removeEventListener('прокрутить', ручка прокрутки);
 };
 }, []);
константа предметы = [
 {
 имя: 'Дом',
 связь: '/'
 },
 {
 имя: 'О',
 связь: '/about'
 },
 {
 имя: 'Контакт',
 связь: '/contact'
 }
 ];
константа данные = [ 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 ]
возвращаться (
<div имя_класса ="Приложение">
<стиль заголовка = {{ background: isSticky? '#ффф': '', ширина: '100%', zИндекс: '999', position: isSticky ?'зафиксированный':'абсолютный' }}>
 {items.map (элемент => (
<a href={item.link} ключ={item.name}>
 {имя элемента}
</ а>
 ))}
</header>
<ул>
 {данные.карта ((х) => {
 возвращаться (<ключ ли = {x}>{Икс}</li>)
 })}
</ul>
</div>
 );
}
экспортпо умолчанию липкий заголовок;

Этот метод использует встроенные стили, но вы также можете использовать классы CSS. Например:

липкий {
 положение: фиксированное;
 сверху: 0;
 ширина: 100%;
 z-индекс: 999;
}

В результате страница будет выглядеть так:

Дополнительные возможности

Есть еще несколько вещей, которые вы можете сделать, чтобы сделать ваш липкий заголовок более удобным для пользователя. Например, вы можете добавить кнопку возврата наверх или сделать заголовок прозрачным, когда пользователь прокручивает страницу вниз.

Вы можете использовать следующий код, чтобы добавить кнопку возврата наверх.

Импортировать Реагировать, {useState, useEffect} от 'реагировать';
функциялипкий заголовок() {
константа [isSticky, setSticky] = useState(ЛОЖЬ);
константа [showBackToTop, setShowBackToTop] = useState(ЛОЖЬ);
константа handleScroll = () => {
константа ОкноПрокруткаВерх = окно.прокрутка;
 если (windowScrollTop > 10) {
 установитьSticky(истинный);
 установитьShowBackToTop(истинный);
 } еще {
 установитьSticky(ЛОЖЬ);
 установитьShowBackToTop(ЛОЖЬ);
 }
 };
константа scrollToTop = () => {
окно.scrollTo({
 верх: 0,
 поведение: 'гладкий'
 });
 };
 использовать эффект (() => {
 window.addEventListener('прокрутить', ручка прокрутки);
возвращаться () => {
 window.removeEventListener('прокрутить', ручка прокрутки);
 };
 }, []);
константа предметы = [
 {
 имя: 'Дом',
 связь: '/'
 },
 {
 имя: 'О',
 связь: '/about'
 },
 {
 имя: 'Контакт',
 связь: '/contact'
 }
 ];
константа данные = [ 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 ]
возвращаться (
<div имя_класса ="Приложение">
<стиль заголовка = {{ background: isSticky? '#ффф': '', ширина: '100%', zИндекс: '999', position: isSticky ?'зафиксированный':'абсолютный' }}>
 {items.map (элемент => (
<a href={item.link} ключ={item.name}>
 {имя элемента}
</ а>
 ))}
</header>
<ул>
 {данные.карта ((х) => {
 возвращаться (<ключ ли = {x}>{Икс}</li>)
 })}
</ul>
<див>
 {showBackToTop && (
<кнопка onClick={scrollToTop}>Наверх</button>
 )}</div>
</div>
 );
}
экспортпо умолчанию липкий заголовок;

Этот код создает липкий компонент заголовка и стилизует его с помощью CSS. Вы также можете стиль компонента с помощью Tailwind CSS.

Альтернативные методы

Вы также можете использовать стороннюю библиотеку для создания липкого заголовка.

Использование липкой реакции

Библиотека react-sticky поможет вам создавать липкие элементы в React. Чтобы использовать react-sticky, сначала установите его:

нпм установить реактивно-липкий

Затем вы можете использовать его следующим образом:

Импортировать Реагировать от 'реагировать';
Импортировать { StickyContainer, Sticky } от «реагировать-липко»;
функцияПриложение() {
константа данные = [ 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 ]
возвращаться (
<див>
<липкийконтейнер>
<Липкий>{({стиль}) => (
<стиль заголовка = {стиль}>
 Этот является липкий заголовок
</header>
 )}
</Sticky>
<ул>
 {данные.карта ((х) => {
 возвращаться (<ключ ли = {x}>{Икс}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
экспортпо умолчанию Приложение;

В приведенном выше коде вам сначала нужно импортировать компоненты StickyContainer и Sticky из библиотеки react-sticky.

Затем вам нужно добавить компонент StickyContainer вокруг содержимого, которое должно содержать липкий элемент. В этом случае вы хотите сделать заголовок закрепленным в списке, который следует за ним, поэтому добавьте StickyContainer вокруг двух.

Затем добавьте компонент Sticky вокруг элемента, который вы хотите сделать липким. В данном случае это элемент заголовка.

Наконец, добавьте свойство стиля к компоненту Sticky. Это позволит правильно расположить заголовок.

Использование реагирующего липкого узла

React-stickynode — еще одна библиотека, которая поможет вам создавать липкие элементы в React.

Чтобы использовать react-stickynode, сначала установите его:

нпм установить реакция-липкий узел

Затем вы можете использовать его следующим образом:

Импортировать Реагировать от 'реагировать';
Импортировать Липкий от 'реагирующий липкий узел';
функцияПриложение() {
константа данные = [ 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 ]
возвращаться (
<див>
<Закрепление включено={true} bottomBoundary={1200}>
<див>
 Этот является липкий заголовок
</div>
</Sticky>
<ул>
 {данные.карта ((х) => {
 возвращаться (<ключ ли = {x}>{Икс}</li>)
 })}
</ul>
</div>
 );
}
экспортпо умолчанию Приложение;

Начните с импорта компонента Sticky из библиотеки react-stickynode.

Затем добавьте компонент Sticky вокруг элемента, который вы хотите сделать липким. В этом случае сделайте заголовок липким, добавив вокруг него компонент Sticky.

Наконец, добавьте пропсы enabled и bottomBoundary в компонент Sticky. Включенная опора гарантирует, что заголовок будет липким, а опора bottomBoundary гарантирует, что он не заходит слишком далеко вниз по странице.

Улучшить пользовательский опыт

С липким заголовком пользователь может легко потерять информацию о том, где он находится на странице. Липкие заголовки могут быть особенно проблематичными на мобильных устройствах, где экран меньше.

Чтобы улучшить взаимодействие с пользователем, вы также можете добавить кнопку «наверх». Такая кнопка позволяет пользователю быстро вернуться к началу страницы. Это может быть особенно полезно на длинных страницах.

Когда вы будете готовы, вы можете бесплатно развернуть свое приложение React на страницах GitHub.