Como fazer um menu fixo, do mais simples ao mais completo

Muito comum hoje em dia, principalmente para mobile, é a necessidade de permanecer um topo fixo para aplicações web, seja uma imagem com botão e um capo de pesquisa ou mais complexo que necessite de correção de altura. Normalmente procurado como menu fixo ou topo fixo, consiste em deixar para o usuário a navegação do site ou da aplicação sempre a vista, geralmente no topo, mas em alguns casos pode ser na base da tela do dispositivo.

Neste breve artigo veremos algumas versões desse recurso, indo do mais simples, usando apenas CSS ao mais complexo, que utiliza javaScript que como sempre gosto com jQuery. Então, sem mais enrolação, vamos lá.

Topo fixo mais simples de todos

Este é todo o código necessário:

body {
	margin-top: 80px;
}
.fixo-topo {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

Nesta versão preciso apenas do css para fixar o conteúdo tanto no topo quanto na base da tela. A vantagem óbvia é a simplicidade e a leveza, sua desvantagem é que o espaço vazio é estático e por isso, caso a altura do topo mude, pode apresentar alguns problemas de layout.

Topo fixo com altura flexível

Aproveitando o exemplo acima agora iremos adicionar o javaScript, aqui utilizo o jQuery apenas por sua facilidade de uso, consiste em corrigir a margem reservada pra não deixar nenhum conteúdo oculto abaixo do topo fixo

Mude a largura da janela para perceber o resultado, todo o código é este:

$(document).ready(function($) {
	$(window).resize(function(event) {
		$('body').css({marginTop: $('.fixo-topo').height() + 'px'});
	}).trigger('resize');
});

Repare que o .ready é apenas para executar a ação somente depois que toda a página esteja carregada, coloquei a alteração dentro do evento resize que garantirá um bom resultado final, mesmo virando a tela ou mudando o tamanho da janela e por fim usei um trigger pra ativar o evento uma vez.

Até aqui já teremos 90% dos casos resolvidos, porém nem sempre queremos um topo tão simples e utilizando jQuery é muito fácil acrescentar um evento no scroll da tela pra gerar algum efeito nosso site de forma elegante.

Topo fixo com evento

Este finalmente é o código:

$(document).ready(function($) {
	var topoFixo = $("header").offset().top;
	$(document).scroll(function(event) {
		if(topoFixo <= $(window).scrollTop()) {
			$("header").addClass('fixo-topo');
			$("body").css({marginTop: $("header").height() + "px"});
		} else {
			$("header").removeClass('fixo-topo');
			$("body").css({marginTop: "0"});
		}
	}).trigger('scroll');
});

Segue a mesma lógica do código anterior sendo que agora o topo se torna fixo somente quando a tela rola até um certo limite que é quando o topo em questão deixa de ficar visível. Várias interações podem ser criadas a partir disso, sendo que aqui deixei o mais simples possível para fins didáticos.

BÔNUS: a classe sticky-top do bootstrap 4

Acrescentando mais uma forma de fixar o topo da página, fica aqui a dica de usar o bootstrap

Este método é muito simples mas requer acrescentar a biblioteca bootstrap em seu projeto que pode influenciar um pouco em como será desenvolvido seu projeto para saber como incluir o bootstrap em seu projeto clique aqui, feito isso basta incluir a classe .sticky-top na div que vai ficar fixa em sua página.

Com isso apresentei três formas relativamente simples de fixar um conteúdo no topo da aplicação web e de forma muito leve, espero que este conteúdo possa te ajudar, um abraço.