Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере. Опширније.

Неки дизајни веб локација користе заглавље које се „лепи“ на врх екрана док се крећете надоле. Заглавље које остаје видљиво док се крећете често се назива лепљиво заглавље.

Можете додати лепљиво заглавље на своју Реацт локацију тако што ћете сами написати прилагођени код или помоћу библиотеке треће стране.

Шта је лепљиво заглавље?

Лепљиво заглавље је заглавље које остаје фиксирано на врху екрана док корисник скролује низ страницу. Ово може бити корисно за одржавање важних информација видљивим док се корисник помера.

Имајте на уму, међутим, да заглавље штапића смањује количину екрана за ваш преостали дизајн. Ако користите лепљиво заглавље, добра је идеја да буде кратко.

Прављење лепљивог заглавља

Прва ствар коју ћете морати да урадите је да подесите он-сцролл хандлер. Ова функција ће се покренути сваки пут када корисник скролује. Ово можете да урадите додавањем слушаоца онсцролл догађаја на објекат прозора и по

instagram viewer
користећи Реацт куке. Да бисте подесили онсцролл хандлер, потребно је да користите куку усеЕффецт и метод аддЕвентЛистенер објекта прозора.

Следећи код креира лепљиву компоненту заглавља и стилизује је користећи ЦСС.

увоз Реагујте, { усеСтате, усеЕффецт } из 'реаговати';
функцијаСтицкиХеадер() {
конст [исСтицки, сетСтицки] = усеСтате(лажно);
конст хандлеСцролл = () => {
конст виндовСцроллТоп = прозор.сцроллИ;
 ако (виндовСцроллТоп > 10) {
 сетСтицки(истина);
 } друго {
 сетСтицки(лажно);
 }
 };
 усеЕффецт(() => {
 виндов.аддЕвентЛистенер('свитак', хандлеСцролл);
повратак () => {
 виндов.ремовеЕвентЛистенер('свитак', хандлеСцролл);
 };
 }, []);
конст ставке = [
 {
 име: 'Кућа',
 линк: '/'
 },
 {
 име: 'О томе',
 линк: '/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 ]
повратак (
<див цлассНаме="Апликација">
<хеадер стиле={{ бацкгроунд: исСтицки? '#ффф': '', ширина: '100%', зИндекс: '999',поситион: исСтицки ?'фиксно':'апсолутна' }}>
 {итемс.мап (ставка => (
<а хреф={итем.линк} кеи={итем.наме}>
 {Назив производа}
</а>
 ))}
</header>
<ул>
 {дата.мап((к) => {
 повратак (<ли кључ={к}>{Икс}</li>)
 })}
</ul>
</div>
 );
}
извозУобичајено СтицкиХеадер;

Овај метод користи уграђени стил, али можете користити и ЦСС класе. На пример:

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

Добијена страница ће изгледати овако:

Додатне функције

Постоји неколико других ствари које можете да урадите да бисте своје лепљиво заглавље учинили лакшим за коришћење. На пример, можете додати дугме за повратак на врх или учинити заглавље транспарентним када корисник скролује надоле.

Можете користити следећи код да додате дугме за повратак на врх.

увоз Реагујте, { усеСтате, усеЕффецт } из 'реаговати';
функцијаСтицкиХеадер() {
конст [исСтицки, сетСтицки] = усеСтате(лажно);
конст [сховБацкТоТоп, сетСховБацкТоТоп] = усеСтате(лажно);
конст хандлеСцролл = () => {
конст виндовСцроллТоп = прозор.сцроллИ;
 ако (виндовСцроллТоп > 10) {
 сетСтицки(истина);
 сетСховБацкТоТоп(истина);
 } друго {
 сетСтицки(лажно);
 сетСховБацкТоТоп(лажно);
 }
 };
конст сцроллТоТоп = () => {
прозор.сцроллТо({
 врх: 0,
 понашање: 'глатка'
 });
 };
 усеЕффецт(() => {
 виндов.аддЕвентЛистенер('свитак', хандлеСцролл);
повратак () => {
 виндов.ремовеЕвентЛистенер('свитак', хандлеСцролл);
 };
 }, []);
конст ставке = [
 {
 име: 'Кућа',
 линк: '/'
 },
 {
 име: 'О томе',
 линк: '/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 ]
повратак (
<див цлассНаме="Апликација">
<хеадер стиле={{ бацкгроунд: исСтицки? '#ффф': '', ширина: '100%', зИндекс: '999',поситион: исСтицки ?'фиксно':'апсолутна' }}>
 {итемс.мап (ставка => (
<а хреф={итем.линк} кеи={итем.наме}>
 {Назив производа}
</а>
 ))}
</header>
<ул>
 {дата.мап((к) => {
 повратак (<ли кључ={к}>{Икс}</li>)
 })}
</ul>
<див>
 {сховБацкТоТоп && (
<дугме онЦлицк={сцроллТоТоп}>Назад на врх</button>
 )}</div>
</div>
 );
}
извозУобичајено СтицкиХеадер;

Овај код креира лепљиву компоненту заглавља и стилизује је користећи ЦСС. Можете такође стилизујте компоненту користећи Таилвинд ЦСС.

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

Такође можете да користите библиотеку треће стране да бисте направили лепљиво заглавље.

Користећи реацт-стицки

Реацт-стицки библиотека вам помаже да креирате лепљиве елементе у Реацт-у. Да бисте користили реацт-стицки, прво га инсталирајте:

нпм инсталирај реаговати-лепљиво

Затим, можете га користити овако:

увоз Реаговати из 'реаговати';
увоз { СтицкиЦонтаинер, Стицки} из 'реаговати-лепљив';
функцијаАпликација() {
конст подаци = [ 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>
<ул>
 {дата.мап((к) => {
 повратак (<ли кључ={к}>{Икс}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
извозУобичајено Апликација;

У горњем коду, прво морате да увезете СтицкиЦонтаинер и Стицки компоненте из библиотеке реацт-стицки.

Затим морате да додате компоненту СтицкиЦонтаинер око садржаја који треба да садржи лепљиви елемент. У овом случају, желите да заглавље учините лепљивим унутар листе која га прати, па додајте СтицкиЦонтаинер око њих.

Затим додајте лепљиву компоненту око елемента који желите да учините лепљивим. У овом случају, то је елемент заглавља.

На крају, додајте стилски реквизит у Стицки компоненту. Ово ће исправно поставити заглавље.

Коришћење реацт-стицкиноде

Реацт-стицкиноде је још једна библиотека која вам помаже да креирате лепљиве елементе у Реацт-у.

Да бисте користили реацт-стицкиноде, прво га инсталирајте:

нпм инсталирај реацт-стицкиноде

Онда га можете користити овако:

увоз Реаговати из 'реаговати';
увоз Стицки из 'реацт-стицкиноде';
функцијаАпликација() {
конст подаци = [ 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 ]
повратак (
<див>
<Стицки енаблед={труе} боттомБоундари={1200}>
<див>
 Ово је лепљиво заглавље
</div>
</Sticky>
<ул>
 {дата.мап((к) => {
 повратак (<ли кључ={к}>{Икс}</li>)
 })}
</ul>
</div>
 );
}
извозУобичајено Апликација;

Започните увозом Стицки компоненте из библиотеке реацт-стицкиноде.

Затим додајте лепљиву компоненту око елемента који желите да учините лепљивим. У овом случају, учините заглавље лепљивим додавањем лепљиве компоненте око њега.

На крају, додајте омогућене и боттомБоундари пропс у Стицки компоненту. Омогућени пропс ће се побринути да заглавље буде лепљиво, а боттомБоундари пропс ће осигурати да не иде предалеко низ страницу.

Побољшајте корисничко искуство

Са лепљивим заглављем, кориснику може бити лако да изгуби траг о томе где се налази на страници. Лепљива заглавља могу бити посебно проблематична на мобилним уређајима, где је екран мањи.

Да бисте побољшали корисничко искуство, можете додати и дугме „назад на врх“. Такво дугме омогућава кориснику да се брзо помери назад до врха странице. Ово може бити посебно корисно на дугим страницама.

Када будете спремни, можете бесплатно да примените своју Реацт апликацију на ГитХуб Пагес.