Como criar um Header Fixo (Sticky header) em um Site

Um header fixo (também conhecido como sticky header) é um recurso de navegação inteligente que faz com que o cabeçalho de um site permaneça no topo da página conforme o usuário rola para cima e para baixo. Em outras palavras, o cabeçalho e a navegação do site estão sempre no topo da página rolada.

Um cabeçalho fixo pode dar a um site uma aparência refinada e tem o benefício adicional de economizar o tempo dos usuários (já que eles não precisam rolar para cima para voltar ao menu de navegação principal).

Na verdade, um estudo descobriu que sites com cabeçalhos fixos são 22% mais rápidos de navegar do que outros sites. Obviamente, isso pode se traduzir em uma ótima vantagem competitiva, dado o fato de que a maioria dos consumidores na web tem períodos de atenção semelhantes aos de um peixinho dourado.

Portanto, o header fixo é um ótimo recurso na sua caixa de ferramentas de conversão, mas como exatamente você cria um em um site?

Nesta postagem, vamos cobrir três maneiras diferentes de criar um cabeçalho fixo em um site:

Usando a Duda, um construtor de sites orientado a profissionais da Web com hospedagem integrada
Usando WordPress e outras plataformas baseadas em temas
Usando CSS e JavaScript

COMO CRIAR UM HEADER FIXO COM A DUDA

Vamos começar com o método mais fácil primeiro. Criar um header fixo com a Duda é muito simples e fácil do que no WordPress ou em quase qualquer outra plataforma CMS.

Detalhes completos sobre a criação de todos os tipos de cabeçalhos de sites podem ser encontrados em nossos recursos de suporte; no entanto, para criar um cabeçalho fixo, basta seguir estas três etapas:

Passe o mouse sobre o cabeçalho
Clique em "Cabeçalho" e depois "Editar Design"
Ativar a chave "encolhimento do cabeçalho”

COMO CRIAR UM HEADER FIXO NO WORDPRESS

Dependendo do tema WordPress que você escolher para trabalhar, fixar um cabeçalho para ficar no topo do site pode ser um pouco complicado.

Se você sabe que deseja usar um cabeçalho fixo no WordPress, a opção mais simples é escolher um tema que use um por padrão - dos quais existem muitos, incluindo Flexia, Sydney, Birdfield e mais.

No entanto, também há vários plug-ins que você pode usar para criar um cabeçalho fixo, incluindo Sticky Menu or anything on Scroll, Simple Sticky Header and Scroll e Fixed and Sticky Header.

Guia Serviços de Marketing mais Rentáveis para Agências

COMO FAZER UM HEADER FIXO COM CSS & JAVASCRIPT

Para criar um cabeçalho fixo sem a ajuda de um construtor de site ou tema WordPress, você pode usar CSS e JavaScript.

Primeiro, encontre o código CSS do cabeçalho, que provavelmente está na pasta do diretório do cabeçalho.

Dica Pro: recorte e cole o código original em um documento separado, caso queira reverter para ele.

Se você preferir não mexer na pasta do diretório, também pode fazer alterações personalizadas de CSS adicionando o seguinte código à área flutuante de personalização de CSS.

 header {
   background: #fff;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 999px;
   box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}


Or more simply this could work:

header  {
   background: #fff;
   position: fixed;
}

Você pode descobrir que, ao usar esse método para criar um header fixo, o espaçamento fica um pouco fora do normal. Se for esse o caso, pode ser necessário adicionar um pouco mais de personalização.

Ajustando o CSS

Para mais personalização usando CSS, você precisará começar a ajustar alturas, larguras, preenchimento e / ou outras áreas.

W3 Schools recomenda essas etapas. Primeiro, estilize o cabeçalho:

 .header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

/* Page content */
.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

/* Add some top padding to the page content to prevent sudden quick movement */
.sticky + .content {
  padding-top: 102px;
}

Adicionando JavaScript

Mesmo depois de estilizar o CSS, o cabeçalho fixo pode não se comportar da maneira que você deseja. Nesse caso, pode ser necessário adicionar algum JavaScript. Novamente, aqui está a que W3 Schools recomenda:

 // When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

// Get the header
var header = document.getElementById("myHeader");

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

Atalho para Criar um Header Fixo

Em vez de definir o preenchimento e / ou adicionar JavaScript, alguns desenvolvedores, como Luis Augusto do Dev.to, sugerem que você use um comando de cabeçalho simples.

Dica Pro: Isso não vai funcionar no Internet Explorer 11.

Guia Serviços de Marketing mais Rentáveis para Agências

RESUMINDO

Os cabeçalhos fixos são incrivelmente populares nos sites de hoje e é importante que os profissionais de web design saibam como criá-los.

Embora todos os três métodos listados acima permitam que você crie um header fixo em um site, usar um construtor de sites como a Duda é de longe o mais fácil.

No entanto, mesmo que você mesmo esteja codificando manualmente um site inteiro, não deve ser muito difícil para você adicionar esse recurso útil que ajuda a melhorar a experiência do usuário.