Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

Alguns designs de sites usam um cabeçalho que "gruda" na parte superior da tela conforme você rola para baixo. Um cabeçalho que permanece visível enquanto você rola geralmente é chamado de cabeçalho fixo.

Você pode adicionar um cabeçalho fixo ao seu site React escrevendo um código personalizado ou usando uma biblioteca de terceiros.

O que é um cabeçalho fixo?

Um cabeçalho fixo é um cabeçalho que permanece fixo na parte superior da tela enquanto o usuário rola a página. Isso pode ser útil para manter informações importantes visíveis enquanto o usuário rola.

Tenha em mente, no entanto, que um cabeçalho stick reduz a quantidade de espaço na tela para o design restante. Se você usar um cabeçalho fixo, é uma boa ideia mantê-lo curto.

Criando um cabeçalho fixo

A primeira coisa que você precisa fazer é configurar um manipulador onscroll. Esta função será executada toda vez que o usuário rolar. Você pode fazer isso adicionando um ouvinte de evento onscroll ao objeto janela e

usando ganchos React. Para configurar o manipulador onscroll, você precisa usar o hook useEffect e o método addEventListener do objeto window.

O código a seguir cria um componente de cabeçalho fixo e o estiliza usando CSS.

importar Reagir, { useState, useEffect } de 'reagir';
funçãoStickyHeader() {
const [isSticky, setSticky] = useState(falso);
const handleScroll = () => {
const windowScrollTop = janela.scrollY;
 if (windowScrollTop > 10) {
 setSticky(verdadeiro);
 } outro {
 setSticky(falso);
 }
 };
 useEffect(() => {
 window.addEventListener('rolagem', handleScroll);
retornar () => {
 window.removeEventListener('rolagem', handleScroll);
 };
 }, []);
const itens = [
 {
 nome: 'Lar',
 link: '/'
 },
 {
 nome: 'Sobre',
 link: '/about'
 },
 {
 nome: 'Contato',
 link: '/contact'
 }
 ];
const dados = [ 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 ]
retornar (
<div className="Aplicativo">
<estilo do cabeçalho={{ plano de fundo: isSticky? '#fff': '', largura: '100%', zÍndice: '999',posição: isSticky ?'fixo':'absoluto' }}>
 {items.map (item => (
<a href={item.link} chave={item.name}>
 {nome do item}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 retornar (<li chave={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
exportarpadrão StickyHeader;

Esse método usa estilo embutido, mas você também pode usar classes CSS. Por exemplo:

.pegajoso {
 posição: fixa;
 superior: 0;
 largura: 100%;
 índice z: 999;
}

A página resultante ficará assim:

Características adicionais

Existem algumas outras coisas que você pode fazer para tornar seu cabeçalho fixo mais fácil de usar. Por exemplo, você pode adicionar um botão voltar ao topo ou tornar o cabeçalho transparente quando o usuário rolar para baixo.

Você pode usar o código a seguir para adicionar um botão voltar ao topo.

importar Reagir, { useState, useEffect } de 'reagir';
funçãoStickyHeader() {
const [isSticky, setSticky] = useState(falso);
const [showBackToTop, setShowBackToTop] = useState(falso);
const handleScroll = () => {
const windowScrollTop = janela.scrollY;
 if (windowScrollTop > 10) {
 setSticky(verdadeiro);
 setShowBackToTop(verdadeiro);
 } outro {
 setSticky(falso);
 setShowBackToTop(falso);
 }
 };
const scrollToTop = () => {
janela.scrollTo({
 superior: 0,
 comportamento: 'suave'
 });
 };
 useEffect(() => {
 window.addEventListener('rolagem', handleScroll);
retornar () => {
 window.removeEventListener('rolagem', handleScroll);
 };
 }, []);
const itens = [
 {
 nome: 'Lar',
 link: '/'
 },
 {
 nome: 'Sobre',
 link: '/about'
 },
 {
 nome: 'Contato',
 link: '/contact'
 }
 ];
const dados = [ 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 ]
retornar (
<div className="Aplicativo">
<estilo do cabeçalho={{ plano de fundo: isSticky? '#fff': '', largura: '100%', zÍndice: '999',posição: isSticky ?'fixo':'absoluto' }}>
 {items.map (item => (
<a href={item.link} chave={item.name}>
 {nome do item}
</a>
 ))}
</header>
<ul>
 {data.map((x) => {
 retornar (<li chave={x}>{x}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<botão onClick={scrollToTop}>De volta ao topo</button>
 )}</div>
</div>
 );
}
exportarpadrão StickyHeader;

Esse código cria um componente de cabeçalho fixo e o estiliza usando CSS. Você também pode estilize o componente usando Tailwind CSS.

Métodos alternativos

Você também pode usar uma biblioteca de terceiros para criar um cabeçalho fixo.

Usando react-sticky

A biblioteca react-sticky ajuda você a criar elementos fixos no React. Para usar o react-sticky, primeiro instale-o:

npm instalar reagir-pegajoso

Então, você pode usar assim:

importar Reagir de 'reagir';
importar { StickyContainer, Sticky } de 'reagir-pegajoso';
funçãoAplicativo() {
const dados = [ 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 ]
retornar (
<div>
<StickyContainer>
<Pegajoso>{({estilo}) => (
<estilo do cabeçalho={estilo}>
 Esse é um cabeçalho fixo
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 retornar (<li chave={x}>{x}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
exportarpadrão Aplicativo;

No código acima, primeiro você precisa importar os componentes StickyContainer e Sticky da biblioteca react-sticky.

Em seguida, você precisa adicionar o componente StickyContainer ao redor do conteúdo que deve conter o elemento fixo. Nesse caso, você deseja tornar o cabeçalho fixo na lista que o segue; portanto, adicione o StickyContainer ao redor dos dois.

Em seguida, adicione o componente Sticky ao redor do elemento que você deseja tornar sticky. Nesse caso, esse é o elemento de cabeçalho.

Finalmente, adicione um adereço de estilo ao componente Sticky. Isso posicionará o cabeçalho corretamente.

Usando react-stickynode

React-stickynode é outra biblioteca que ajuda a criar elementos fixos no React.

Para usar o react-stickynode, primeiro instale-o:

npm instalar react-stickynode

Então você pode usar assim:

importar Reagir de 'reagir';
importar Pegajoso de 'reagir-stickynode';
funçãoAplicativo() {
const dados = [ 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 ]
retornar (
<div>
<Sticky ativado={true} bottomBoundary={1200}>
<div>
 Esse é um cabeçalho fixo
</div>
</Sticky>
<ul>
 {data.map((x) => {
 retornar (<li chave={x}>{x}</li>)
 })}
</ul>
</div>
 );
}
exportarpadrão Aplicativo;

Comece importando o componente Sticky da biblioteca react-stickynode.

Em seguida, adicione o componente Sticky ao redor do elemento que você deseja tornar sticky. Nesse caso, torne o cabeçalho fixo adicionando o componente Fixo ao redor dele.

Por fim, adicione os props enabled e bottomBoundary ao componente Sticky. A prop habilitada garantirá que o cabeçalho seja fixo, e a prop bottomBoundary garantirá que não vá muito longe na página.

Melhore a experiência do usuário

Com um cabeçalho fixo, pode ser fácil para o usuário perder a noção de onde está na página. Cabeçalhos fixos podem ser especialmente problemáticos em dispositivos móveis, onde a tela é menor.

Para melhorar a experiência do usuário, você também pode adicionar um botão "voltar ao topo". Esse botão permite que o usuário role rapidamente de volta ao topo da página. Isso pode ser especialmente útil em páginas longas.

Quando estiver pronto, você pode implantar seu aplicativo React gratuitamente no GitHub Pages.