Como criar um cabeçalho de site fixo

Os cabeçalhos do site que permanecem no lugar quando o usuário rola a tela se tornaram um elemento de design muito popular. Eles permitem que o usuário acesse facilmente a navegação sem a necessidade de rolar para cima cada vez que deseja escolher uma página ou opção diferente.

Elementos com essa funcionalidade são frequentemente chamados de “adesivos” porque ficam com o usuário, permanecendo visíveis à medida que se movem pelo site. Quando um usuário chega ao site pela primeira vez, os elementos estarão em sua posição inicial, mas o cabeçalho fixo permanecerá no mesmo lugar.

Como a navegação é um dos elementos mais importantes de um site, essa abordagem ajuda a tornar a navegação mais acessível. Ter uma navegação que permanece no lugar permite um fluxo fácil para o usuário enquanto ele se move pelo conteúdo do site, o que é extremamente importante.

Os elementos fixos de navegação ajudam a criar um fluxo de usuário fácil à medida que as pessoas se movem pelo seu site.

O que o torna pegajoso?

O posicionamento fixo é um componente chave para manter a navegação no lugar. Esse elemento de posição fixa é posicionado em relação à viewport ou à própria janela do navegador. Como a viewport não muda quando o site é rolado, esse elemento de posição fixa permanecerá no mesmo lugar quando a página for rolada.

Nota: Não tente isso em seu site ao vivo

Lembre-se: você nunca deve alterar o código diretamente em seu site ao vivo para garantir que nada seja quebrado. Nosso aplicativo de desenvolvimento local gratuito, Local, irá ajudá-lo a configurar um ambiente de teste onde você pode seguir este tutorial com segurança.

Como fazemos com que a navegação permaneça em um só lugar?

Tornar a navegação pegajosa não poderia ser mais fácil; é feito apenas com estilo CSS. Basicamente se parece com isto:

 [css]

.navbar-fixed-top {

posição: fixa;

direita: 0;

esquerda: 0;

índice z: 999;

}

[/css]

Não importa o tamanho da sua página ou quantas vezes você rola para cima e para baixo, a navegação ficará “presa” no topo da página. Uma classe chamada .navbar-fixed-top foi adicionada à navegação que cria o posicionamento para a navegação. Eu adicionei esta classe à tag de navegação. A posição é definida como fixa e adicionar posicionamento esquerdo e direito garante que o posicionamento esteja correto e ocupe toda a largura da página.

Lembre-se de que sempre que essa classe for aplicada, ela criará a posição fixa do elemento. Muito provavelmente esta classe será aplicada apenas uma vez, caso contrário, haveria vários elementos de página se comportando da mesma maneira no mesmo local, criando uma confusão confusa.

Outra consideração importante é o índice z. Como queremos que a navegação esteja sempre visível, precisamos garantir que ela não seja sobreposta por outros elementos. Quando referenciamos o z-index , estamos falando sobre a propriedade CSS que define a ordem da pilha de elementos específicos. Um elemento com ordem de pilha maior está sempre na frente de outro elemento com ordem de pilha menor. Um valor de 999 é um número grande, tornando-se uma aposta segura para a navegação.

Ajustar corpo da página

Como a navegação agora está em uma posição fixa, ela cobrirá parte do conteúdo na parte superior. Existe uma solução simples para isso. Adicionar preenchimento à parte superior do corpo empurrará a página para baixo para que o conteúdo na parte superior não seja coberto pelo cabeçalho quando o usuário chegar na página.
Você pode adicionar preenchimento ao corpo em seu arquivo CSS:

 [css]

corpo {

padding-top: 75px;

}

[/css]

Lembre-se de que o preenchimento pode ser maior ou menor, dependendo da espessura do cabeçalho fixo.

Fazendo o Sticky Header Squishy

É comum encontrar um cabeçalho que fica mais fino quando um usuário rola além de um certo ponto, fazendo com que pareça mole. Quando a navegação diminui de tamanho, ajuda a dar ao usuário mais espaço para ver o conteúdo principal do site. Isso é particularmente útil em dispositivos menores. Estaremos usando uma combinação de CSS e JavaScript para fazer isso acontecer.

Navegação Squishy com Script AnimatedHeader

Para adicionar um cabeçalho animado que mudará seu tamanho na rolagem, existe uma solução excelente e leve para tornar a navegação mole. Chama-se AnimatedHeader. Possui licença MIT, portanto pode ser usado para projetos pessoais ou comerciais. Para obter esses arquivos, confira AnimatedHeader no GitHub.

CSS básico para navegação

Vamos dar uma olhada em dois estilos CSS importantes. O primeiro provavelmente parece familiar para você, .navbar-fixed-top que especifica nossa altura, largura e posição fixa para a navegação fixa. Abaixo, você pode ver que há outra classe adicionada que especifica uma altura de 75px. Este é o tamanho “esmagado”.

 [css]

.navbar-fixed-top {
posição: fixa;
superior: 0;
esquerda: 0;
largura: 100%;
plano de fundo: #f6f6f6;
índice z: 999;
altura: 90px;
estouro: oculto;
-webkit-transition: altura 0,3s;
-moz-transição: altura 0,3s;
transição: altura 0,3s;
}

.navbar-fixed-top.cbp-af-header-shrink {
altura: 75px;
}

[/css]

Para alterar o tamanho, o JavaScript é usado para adicionar a classe de .cpb-af-header-shrink . Vamos dar uma olhada na parte do script que faz isso acontecer:

 [javascript]

function scrollPage() {
var sy = scrollY();
if ( sy >= changeHeaderOn ) {
classie.add(cabeçalho, 'cbp-af-header-shrink');
}
outro {
classie.remove(cabeçalho, 'cbp-af-header-shrink');
}
fezScroll = false;
}

[/javascript]

Apenas um lembrete, há mais no script, portanto, certifique-se de baixar o código-fonte para ter todos os componentes. Como você pode ver, depois que um usuário passa de um certo ponto, a classe .cpb-af-header-shrink é adicionada. Se o usuário rolar a página para trás, essa classe será removida.

A opção CSS Sticky Positioning

Há também uma opção que pode ser menos complicada. Dependendo do suporte do navegador para o qual você está projetando, position: sticky; torna a criação de um cabeçalho fixo muito simples. O suporte ao navegador não é terrível, mas também não é totalmente global. Quando você tiver declarado sticky, os prefixos podem ser usados. Confira Posso usar para mais detalhes.

Uma maneira simples de descrever o posicionamento fixo é que ele é uma combinação de posicionamento relativo e fixo. Eu estou supondo que você se depara com um posicionamento fixo um pouco. Estamos falando de cabeçalhos aqui, mas também é útil para qualquer elemento de interface do usuário que você deseja que seja “fixo” enquanto os usuários estão rolando. Eles o veem “preso” quando o elemento chega a uma distância específica da borda da janela de visualização.

O elemento é tratado como posicionado relativo até atingir um determinado ponto e então é “fixo”. Este ponto é declarado usando CSS. O “ponto” é basicamente quando você especifica superior, inferior, esquerda ou direita, como faria com o posicionamento absoluto. Você precisa especificar para que o elemento tenha algo para “grudar”.

Usando a posição: pegajoso

É bem simples de usar. Algumas declarações CSS e consegui ter um cabeçalho fixo. Aqui estão três passos simples:

1. Encontre o estilo correto para que você possa declarar o elemento como fixo usando position:sticky; (não se esqueça dos prefixos do navegador como position: -webkit-sticky; ).
2. Escolha a “borda adesiva” (superior, direita, inferior ou esquerda) para o item “grudar”.
3. Declare a distância da “borda fixa”, ou seja, 10px para um cabeçalho que se torna fixo quando está a 10px da área de rolagem.

 [css]

.navbar-fixed-top {
  posição: -webkit-sticky;
  posição: pegajoso;
  superior: 0;
}

[/css] 

Eu não queria nenhum espaço entre o cabeçalho fixo e a janela de visualização, então é 0 pixel a partir do topo. Você pode ver este exemplo no Codepen.

Esteja ciente dessas situações complicadas de estouro

Compatibilidade de estouro

É ótimo, mas não é perfeito. Existem algumas limitações. Às vezes, o estouro pode ser um pouco imprevisível. É melhor ficar longe de certos tipos de estouro em um elemento pai com algo que precisa position: sticky . Pode haver problemas com estouro automático, rolagem ou oculto.

Suporte limitado ao navegador

O suporte do navegador é limitado, portanto, usar a regra supports para detectar se o navegador atual oferece suporte ao posicionamento fixo é uma opção. Isso se parece com:

 [css]

@supports(position:sticky){
  .cabeçalho{
    posição: -webkit-sticky;
    posição: pegajoso;
    superior: 0;
  }
}

[/css]

É importante pensar se o posicionamento fixo é absolutamente necessário. Se for, a abordagem de posicionamento fixo pode ser usada. Se não for absolutamente necessário ou o suporte do navegador não for uma preocupação, a abordagem fixa é mais fácil de implementar.

Pode parecer complexo no começo, mas não há razão para ficar preso em uma rotina de navegação; é relativamente simples tornar sua navegação pegajosa e mole. Com um simples posicionamento fixo de CSS, você pode criar facilmente um cabeçalho de site fixo. Com um pouco de JavaScript simples, a navegação fixa pode ser aprimorada ao ser reduzida a uma altura reduzida, dando aos usuários mais espaço para visualizar o conteúdo do site.

Não tente isso em seu site ao vivo

Crie um cabeçalho de site fixo para seus sites hospedados no WP Engine no Local! Saiba mais e baixe gratuitamente aqui!