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.

4 respostas

  1. Olá Ronaldo, tudo bem?

    Encontrei você através do youtube e já consegui aprender algumas coisas a respeito do Magento. Adorei a forma dinâmica que você explica e estou começando a entender melhor como funciona esse sistema que antigamente eu nunca havia mexido… rsss

    Bom, tenho duas dúvidas para tirar com você:

    1ª DUVIDA
    Swatches – fiz o passo a passo para cadastrar novas cores no magento e coloquei as imagens exatamente com o mesmo nome e em png, a questão é que o magento renomeia as imagens;
    exemplo “012-AZUL ESCURO.png” ele renomeia para “012-AZUL_ESCURO.png” – colocando um underline no local do espaço, dessa maneira meu site não identifica a cor e associa as duas coisas. Como faço para ele parar de renomear e/ou associar a descrição?

    2ª DUVIDA
    Tamanhos – trabalhamos com roupas e minha linha plus size tem os tamanhos “G1, G2, G3 e G4” mas eu não sei aonde arrumar no cadastro para que eles apareçam nessa ordem nos produtos, eles estão aparecendo da maneira “G2, G3, G4 e G1” onde arrumo?

    Muito obrigada!
    Stephani

    1. Oi, não tem jeito de impedir do magento renomear o nome do aruivo, ele fez isso pra garantir a compatibilidade, o ideal é manter o nome da imagem sem espaço e com caia baixa, inclusive a extensão.
      quanto a ordem, pode ser que siga a ordem criada, voce pode marcar e desmarcar pra fazer a ordem mudar

  2. Olá Ronaldo, tudo bem? eu gostaria de saber em qual arquivo deve colocar esses códigos para colocar o menu fixo.
    Muito obrigdo por esses ensinamentos sobre o Magento. Um grande abraço e felicidades;

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.