A sticky header ou cabeçalho fixo, que gruda, é a denominação empregada à barra de menu que fica fixa no topo da tela ao “scrollarmos” o mouse.

Neste tutorial vamos criar um cabeçalho que adere à parte superior da janela de exibição, mas para que ele não interfira com o conteúdo, vamos minimizá-la quando o usuário rola para baixo a página.Vamos começar:

Antes de mais nada, veja a funcionalidade de um sticky header:

O HTML

Nesse exemplo, HTML é muito simples, tudo o que precisamos é um h1 dentro de um cabeçalho (header). Abaixo disso temos uma imagem para forçar a página para rolar para que possamos testar o efeito.

<header><h1>Sticky Header</h1></header>
<img src="large-image.jpg" width="782" height="2000" alt="Imagem" />

jQuery

Transições em CSS são a melhor maneira de lidar com a parte de animação do nosso Sticky header. Nós somente estamos usando jQuery para detectar a posição do scroll de rolagem da janela. Quando a posição de rolagem da janela é maior do que 1 –  significa que o usuário está rolando para baixo, então queremos adicionar a classe “sticky” para o header; caso contrário, a classe não é adicionada .

$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});

O CSS

O CSS tem dus utilizadades importantes, uma é denominar dois estados diferentes do cabeçalho, o estado padrão e o estado “pegajoso” ou sticky, a outra é para fazer a transição entre os dois estados . Para começar, vamos adicionar alguns estilos simples que melhoram a aparência do cabeçalho:

header{
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 72px;
  line-height: 108px;
  height: 108px;
  background: #335C7D;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
}

Agora vem a parte divertida.

Quando o usuário rola para baixo, a classe ‘sticky‘ será aplicada, e agora podemos denominar o cabeçalho de forma diferente para refletir essa nova prioridade na página. Nós também definimos a posição para o estado fixo, de modo que não estamos alterando o posicionamento da rolagem. Após essa etapa devemos mudar o tamanho para que ele ocupe menos espaço na tela e, também, queremos mudar a cor e alinhar o texto à esquerda para que visualmente que não interfira com o conteúdo:

header.sticky {
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
}

Por fim, para animar a mudança, tudo o que precisamos fazer é definir uma transição no cabeçalho, assim:

transition: all 0.4s ease;

CONCLUSÃO

A criação deste cabeçalho animado com propriedades CSS3 e alternando a classe com jQuery é extremamente simples e acrescenta muita qualidade ao UX do design do site. Além do mais, o código cai em desuso, então não há realmente nenhuma desvantagem para a implementação.

Hoje com a tendências de sites responsives, a utilização do sticky header ou cabeçalho fixo é uma técnica muito utilizada na programação da pagina.
Algumas ferramentas de criação de sites, contam com essa tecnologia e você não precisa por a mão no código para implementá-la.