Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Някои дизайни на уебсайтове използват заглавка, която „залепва“ в горната част на екрана, докато превъртате надолу. Заглавие, което остава видимо, докато превъртате, често се нарича залепващо заглавие.

Можете да добавите лепкава заглавка към вашия сайт в React, като сами напишете персонализиран код или като използвате библиотека на трета страна.

Какво е лепкава заглавка?

Залепващата заглавка е заглавка, която остава фиксирана в горната част на екрана, докато потребителят превърта надолу по страницата. Това може да бъде полезно за поддържане на видима важна информация, докато потребителят превърта.

Имайте предвид обаче, че заглавната част на стик намалява размера на екрана за оставащия ви дизайн. Ако използвате лепкава заглавка, добре е да е кратка.

Създаване на Sticky Header

Първото нещо, което трябва да направите, е да настроите манипулатор за превъртане. Тази функция ще се изпълнява всеки път, когато потребителят превърта. Можете да направите това, като добавите слушател на събития onscroll към обекта прозорец и чрез

instagram viewer
използвайки куки React. За да настроите манипулатора onscroll, трябва да използвате куката useEffect и метода addEventListener на обекта прозорец.

Следният код създава лепкав заглавен компонент и го стилизира с помощта на CSS.

импортиране Реагирайте, {useState, useEffect} от 'реагира';
функцияStickyHeader() {
конст [isSticky, setSticky] = useState(невярно);
конст handleScroll = () => {
конст windowScrollTop = прозорец.scrollY;
 ако (windowScrollTop > 10) {
 setSticky(вярно);
 } друго {
 setSticky(невярно);
 }
 };
 useEffect(() => {
 window.addEventListener('превъртане', handleScroll);
връщане () => {
 window.removeEventListener('превъртане', handleScroll);
 };
 }, []);
конст елементи = [
 {
 име: 'У дома',
 връзка: '/'
 },
 {
 име: 'относно',
 връзка: '/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 className="Приложение">
<header style={{ background: isSticky? '#Ф ф ф': '', ширина: '100%', zИндекс: '999',позиция: isSticky?'фиксирани':'абсолютен' }}>
 {items.map (item => (
<a href={item.link} ключ={item.name}>
 {име на предмета}
</a>
 ))}
</header>
<ул>
 {data.map((x) => {
 връщане (<li ключ={x}>{х}</li>)
 })}
</ul>
</div>
 );
}
износпо подразбиране StickyHeader;

Този метод използва вграден стил, но можете да използвате и CSS класове. Например:

.лепкав {
 позиция: фиксирана;
 отгоре: 0;
 ширина: 100%;
 z-индекс: 999;
}

Резултатната страница ще изглежда така:

Допълнителни функции

Има няколко други неща, които можете да направите, за да направите своя лепкав хедър по-удобен за потребителя. Например, можете да добавите бутон за връщане назад или да направите заглавката прозрачна, когато потребителят превърта надолу.

Можете да използвате следния код, за да добавите бутон за връщане към началото.

импортиране Реагирайте, {useState, useEffect} от 'реагира';
функцияStickyHeader() {
конст [isSticky, setSticky] = useState(невярно);
конст [showBackToTop, setShowBackToTop] = useState(невярно);
конст handleScroll = () => {
конст windowScrollTop = прозорец.scrollY;
 ако (windowScrollTop > 10) {
 setSticky(вярно);
 setShowBackToTop(вярно);
 } друго {
 setSticky(невярно);
 setShowBackToTop(невярно);
 }
 };
конст scrollToTop = () => {
прозорец.scrollTo({
 отгоре: 0,
 поведение: 'гладка'
 });
 };
 useEffect(() => {
 window.addEventListener('превъртане', handleScroll);
връщане () => {
 window.removeEventListener('превъртане', handleScroll);
 };
 }, []);
конст елементи = [
 {
 име: 'У дома',
 връзка: '/'
 },
 {
 име: 'относно',
 връзка: '/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 className="Приложение">
<header style={{ background: isSticky? '#Ф ф ф': '', ширина: '100%', zИндекс: '999',позиция: isSticky?'фиксирани':'абсолютен' }}>
 {items.map (item => (
<a href={item.link} ключ={item.name}>
 {име на предмета}
</a>
 ))}
</header>
<ул>
 {data.map((x) => {
 връщане (<li ключ={x}>{х}</li>)
 })}
</ul>
<див>
 {showBackToTop && (
<бутон onClick={scrollToTop}>Върнете се в началото</button>
 )}</div>
</div>
 );
}
износпо подразбиране StickyHeader;

Този код създава лепкав заглавен компонент и го стилизира с помощта на CSS. Можете също стилизирайте компонента с помощта на Tailwind CSS.

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

Можете също да използвате библиотека на трета страна, за да създадете лепкава заглавка.

Използване на react-sticky

Библиотеката react-sticky ви помага да създавате лепкави елементи в React. За да използвате react-sticky, първо го инсталирайте:

npm Инсталирай реагира-лепкав

След това можете да го използвате по следния начин:

импортиране Реагирайте от 'реагира';
импортиране { StickyContainer, Sticky } от 'react-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 ]
връщане (
<див>
<StickyContainer>
<Лепкава>{({ стил }) => (
<заглавен стил={стил}>
 Това е лепкава заглавка
</header>
 )}
</Sticky>
<ул>
 {data.map((x) => {
 връщане (<li ключ={x}>{х}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
износпо подразбиране Приложение;

В горния код първо трябва да импортирате компонентите StickyContainer и Sticky от библиотеката react-sticky.

След това трябва да добавите компонента StickyContainer около съдържанието, което трябва да съдържа лепкавия елемент. В този случай искате да направите заглавката лепкава в списъка, който го следва, така че добавете StickyContainer около двата.

След това добавете Sticky компонента около елемента, който искате да направите лепкав. В този случай това е заглавният елемент.

Накрая добавете стилова опора към компонента Sticky. Това ще позиционира правилно заглавката.

Използване на react-stickynode

React-stickynode е друга библиотека, която ви помага да създавате лепкави елементи в React.

За да използвате react-stickynode, първо го инсталирайте:

npm Инсталирай реагират-stickynode

След това можете да го използвате по следния начин:

импортиране Реагирайте от 'реагира';
импортиране Лепкава от '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 ]
връщане (
<див>
<Sticky enabled={true} bottomBoundary={1200}>
<див>
 Това е лепкава заглавка
</div>
</Sticky>
<ул>
 {data.map((x) => {
 връщане (<li ключ={x}>{х}</li>)
 })}
</ul>
</div>
 );
}
износпо подразбиране Приложение;

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

След това добавете Sticky компонента около елемента, който искате да направите лепкав. В този случай направете заглавката лепкава, като добавите Sticky компонента около нея.

Накрая добавете активираните и bottomBoundary подпори към компонента Sticky. Активираният проп ще гарантира, че заглавката е лепкава, а проп bottomBoundary ще гарантира, че няма да отиде твърде далеч надолу по страницата.

Подобрете потребителското изживяване

С лепкава заглавка за потребителя може лесно да загуби представа къде се намира на страницата. Залепващите заглавки могат да бъдат особено проблематични на мобилни устройства, където екранът е по-малък.

За да подобрите потребителското изживяване, можете също да добавите бутон "обратно в началото". Такъв бутон позволява на потребителя бързо да превърти обратно в горната част на страницата. Това може да бъде особено полезно при дълги страници.

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