Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Niektóre projekty stron internetowych wykorzystują nagłówek, który „przykleja się” do górnej części ekranu podczas przewijania w dół. Nagłówek, który pozostaje widoczny podczas przewijania, jest często nazywany nagłówkiem lepkim.

Możesz dodać lepki nagłówek do swojej witryny React, samodzielnie pisząc niestandardowy kod lub korzystając z biblioteki innej firmy.

Co to jest lepki nagłówek?

Lepki nagłówek to nagłówek, który pozostaje u góry ekranu, gdy użytkownik przewija stronę w dół. Może to być przydatne do utrzymywania widoczności ważnych informacji podczas przewijania strony przez użytkownika.

Należy jednak pamiętać, że nagłówek kija zmniejsza ilość miejsca na ekranie dla pozostałego projektu. Jeśli używasz lepkiego nagłówka, dobrze jest, aby był krótki.

Tworzenie lepkiego nagłówka

Pierwszą rzeczą, którą musisz zrobić, to skonfigurować program obsługi onscroll. Ta funkcja będzie uruchamiana za każdym razem, gdy użytkownik przewinie stronę. Możesz to zrobić, dodając detektor zdarzeń onscroll do obiektu okna i przez

instagram viewer
za pomocą haków React. Aby skonfigurować moduł obsługi onscroll, musisz użyć haka useEffect i metody addEventListener obiektu okna.

Poniższy kod tworzy lepki komponent nagłówka i stylizuje go za pomocą CSS.

import Reaguj, { useState, useEffect } z 'reagować';
funkcjonowaćPrzyklejony nagłówek() {
konst [isSticky, setSticky] = useState(FAŁSZ);
konst handleScroll = () => {
konst oknoScrollTop = okno.przewińY;
 jeśli (windowScrollTop > 10) {
 zestawSticky(PRAWDA);
 } w przeciwnym razie {
 zestawSticky(FAŁSZ);
 }
 };
 użyjEfektu(() => {
 window.addEventListener('zwój', uchwytPrzewiń);
powrót () => {
 window.removeEventListener('zwój', uchwytPrzewiń);
 };
 }, []);
konst elementy = [
 {
 nazwa: 'Dom',
 połączyć: '/'
 },
 {
 nazwa: 'O',
 połączyć: '/about'
 },
 {
 nazwa: 'Kontakt',
 połączyć: '/contact'
 }
 ];
konst dane = [ 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 ]
powrót (
<div nazwa klasy ="Aplikacja">
<header style={{tło: czy się klei? '#ffff': '', szerokość: '100%', zIndeks: '999', pozycja: jest lepki?'naprawił':'absolutny' }}>
 {przedmioty.map (przedmiot => (
<a href={item.link} key={item.name}>
 {nazwa przedmiotu}
</A>
 ))}
</header>
<ul>
 {data.map((x) => {
 powrót (<klucz li={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
eksportdomyślny Lepki nagłówek;

Ta metoda wykorzystuje stylizację w wierszu, ale można również użyć klas CSS. Na przykład:

.lepki {
 pozycja: stała;
 góra: 0;
 szerokość: 100%;
 indeks z: 999;
}

Wynikowa strona będzie wyglądać następująco:

Dodatkowe funkcje

Jest kilka innych rzeczy, które możesz zrobić, aby uczynić swój lepki nagłówek bardziej przyjaznym dla użytkownika. Na przykład możesz dodać przycisk powrotu do początku lub ustawić przezroczysty nagłówek, gdy użytkownik przewinie w dół.

Możesz użyć następującego kodu, aby dodać przycisk powrotu do początku.

import Reaguj, { useState, useEffect } z 'reagować';
funkcjonowaćPrzyklejony nagłówek() {
konst [isSticky, setSticky] = useState(FAŁSZ);
konst [showBackToTop, setShowBackToTop] = useState(FAŁSZ);
konst handleScroll = () => {
konst oknoScrollTop = okno.przewińY;
 jeśli (windowScrollTop > 10) {
 zestawSticky(PRAWDA);
 ustawPokażPowrótDoGóry(PRAWDA);
 } w przeciwnym razie {
 zestawSticky(FAŁSZ);
 ustawPokażPowrótDoGóry(FAŁSZ);
 }
 };
konst scrollToTop = () => {
okno.scrollTo({
 góra: 0,
 zachowanie: 'gładki'
 });
 };
 użyjEfektu(() => {
 window.addEventListener('zwój', uchwytPrzewiń);
powrót () => {
 window.removeEventListener('zwój', uchwytPrzewiń);
 };
 }, []);
konst elementy = [
 {
 nazwa: 'Dom',
 połączyć: '/'
 },
 {
 nazwa: 'O',
 połączyć: '/about'
 },
 {
 nazwa: 'Kontakt',
 połączyć: '/contact'
 }
 ];
konst dane = [ 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 ]
powrót (
<div nazwa klasy ="Aplikacja">
<header style={{tło: czy się klei? '#ffff': '', szerokość: '100%', zIndeks: '999', pozycja: jest lepki?'naprawił':'absolutny' }}>
 {przedmioty.map (przedmiot => (
<a href={item.link} key={item.name}>
 {nazwa przedmiotu}
</A>
 ))}
</header>
<ul>
 {data.map((x) => {
 powrót (<klucz li={x}>{X}</li>)
 })}
</ul>
<dz>
 {showBackToTop && (
<button onClick={scrollToTop}>Powrót do góry</button>
 )}</div>
</div>
 );
}
eksportdomyślny Lepki nagłówek;

Ten kod tworzy lepki komponent nagłówka i stylizuje go za pomocą CSS. Możesz również stylizuj komponent za pomocą Tailwind CSS.

Metody alternatywne

Możesz także użyć biblioteki innej firmy, aby utworzyć lepki nagłówek.

Używanie reakcji-lepkości

Biblioteka React-sticky pomaga tworzyć lepkie elementy w React. Aby użyć React-sticky, najpierw zainstaluj:

np zainstalować reagują-lepkie

Następnie możesz użyć go w następujący sposób:

import Reagować z 'reagować';
import { Przyklejony pojemnik, Przyklejony } z „reakcja lepka”;
funkcjonowaćAplikacja() {
konst dane = [ 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 ]
powrót (
<dz>
<LepkiPojemnik>
<Lepki>{({styl}) => (
<styl nagłówka={styl}>
 Ten Jest lepki nagłówek
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 powrót (<klucz li={x}>{X}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
eksportdomyślny Aplikacja;

W powyższym kodzie musisz najpierw zaimportować komponenty StickyContainer i Sticky z biblioteki react-sticky.

Następnie musisz dodać komponent StickyContainer wokół treści, która powinna zawierać element lepki. W takim przypadku chcesz, aby nagłówek był lepki na następującej po nim liście, więc dodaj StickyContainer wokół tych dwóch.

Następnie dodaj komponent Sticky wokół elementu, który chcesz przykleić. W tym przypadku jest to element nagłówka.

Na koniec dodaj rekwizyt stylu do komponentu Sticky. Spowoduje to prawidłowe ustawienie nagłówka.

Używanie reagowania-stickynode

React-stickynode to kolejna biblioteka, która pomaga tworzyć lepkie elementy w React.

Aby użyć react-stickynode, najpierw zainstaluj go:

np zainstalować reagują-stickynode

Następnie możesz użyć go w ten sposób:

import Reagować z 'reagować';
import Lepki z „reakcja-stickynode”;
funkcjonowaćAplikacja() {
konst dane = [ 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 ]
powrót (
<dz>
<Trwałe włączone={true} bottomBoundary={1200}>
<dz>
 Ten Jest lepki nagłówek
</div>
</Sticky>
<ul>
 {data.map((x) => {
 powrót (<klucz li={x}>{X}</li>)
 })}
</ul>
</div>
 );
}
eksportdomyślny Aplikacja;

Zacznij od zaimportowania komponentu Sticky z biblioteki react-stickynode.

Następnie dodaj składnik Sticky wokół elementu, który chcesz przykleić. W takim przypadku spraw, aby nagłówek był lepki, dodając wokół niego komponent Sticky.

Na koniec dodaj właściwości enable i bottomBoundary do komponentu Sticky. Włączony rekwizyt zapewni, że nagłówek będzie lepki, a rekwizyt bottomBoundary sprawi, że nie będzie on schodził zbyt daleko w dół strony.

Popraw wrażenia użytkownika

Dzięki lepkiemu nagłówkowi użytkownik może łatwo stracić orientację, gdzie się znajduje na stronie. Lepkie nagłówki mogą być szczególnie problematyczne na urządzeniach mobilnych, gdzie ekran jest mniejszy.

Aby poprawić komfort użytkowania, możesz również dodać przycisk „powrót do góry”. Taki przycisk pozwala użytkownikowi szybko przewinąć do góry strony. Może to być szczególnie pomocne w przypadku długich stron.

Kiedy będziesz gotowy, możesz bezpłatnie wdrożyć swoją aplikację React na GitHub Pages.