Crie um cabeçalho auto-oculto com Headroom.js

Ocultação automática de cabeçalhos tem sido constantemente popular em web design por um bom tempo. Muitos blogs e revistas on-line usam o cabeçalho para manter os usuários envolvidos e dar-lhes acesso direto à navegação.

Médio tem redefiniu esse recurso com um conceito básico que esconde a navegação enquanto rolagem para baixo mas mostra isso enquanto rolando para cima. Este conceito tornou-se um tendência popular e agora você pode facilmente replicá-lo usando Headroom.js.

Headroom.js é um biblioteca JavaScript vanilla gratuita sem dependências ou recursos excessivos da API. Você acabou de adicioná-lo ao seu HTML, segmentar o cabeçalho da página e deixá-lo executar.

Headroom simplesmente adiciona e remove certas classes CSS que animam a fim de mostrar / ocultar o cabeçalho usando JavaScript para detectar o movimento.

Você poderia fazer essa funcionalidade sozinho, mas por que se incomodar? O headroom é testado e suporta todos os principais navegadores. Até mesmo joga bem com jQuery ou Zepto se você já tem uma biblioteca JS instalada em seu site.

Você vai encontrar muitas amostras de código no repo GitHub mas aqui está um exemplo simples que tem como alvo o #cabeçalho elemento:

 var myElement = document.querySelector ("# header"); // cria um objeto Headroom passando no elemento #header var headroom = new Headroom (myElement); // inicializa a biblioteca headroom.init (); 

o nisso() função tem muitas opções para personalizar. Você pode personalizar os diferentes classes de elemento, junto com diferentes retornos de chamada do acionador de evento onde você pode incorpore suas próprias funções. Por exemplo, se você quiser que o elemento desapareça depois de soltar, você usaria o onUnpin ligue de volta.

Essas opções são todas listado na página principal do plugin, então confira e veja o que você pensa. Se você quiser ver Headroom em ação dê uma olhada na caneta abaixo que contém um clone completo da página principal de demonstração.