Saiba como fixar seu menu no topo do site após scroll.

Olá pessoal, tudo bom?
Hoje iremos falar sobre como criar um efeito bastante legal com jQuery. Iremos fixar o menu do site no topo da página após rolarmos o conteúdo.
Espero que gostem.
Vamos lá!

O menu scroll fixo é muito utilizado em páginas que possuam conteúdo extenso e com rolagem automática. Atualmente bastante utilizado, ele deixa o site mais elegante e moderno além de facilitar a navegabilidade, permitindo que o menu principal fique aos olhos do usuário a todo momento.

Devo apenas ressaltar que esse estilo de menu não pode ser muito grande, ter um height muito alto, pois aliás de facilitar ele pode atrapalhar. Apesar de hoje a maioria dos usuários possuírem monitores enormes, não podemos esquecer que existem pessoas que utilizam modelos menores, sem contar a utilização de pequenos aparelhos como smartphones e tablets.

Visualize e faça download do código nos links abaixo.

exemplo-imagem-menu

PASSO 1: A ESTRUTURA HTML

O HTML do nosso menu é bastante simples, somente uma lista não ordenada como padrão:

Percebam que estou utilizando apenas o nav onde vai ser estilizado o background do menu e a lista ul onde iremos centralizar o menu e estilizar os links.

PASSO 2: ENTENDENDO O FIXED

Para que possamos deixar um elemento fixo em alguma posição da página, nós precisamos utilizar a propriedade do CSS position: fixed.

Como eu posso fixar esse menu no topo após a rolagem da página sendo que ele não está fixo no momento inicial?

Aí que está o “chã” da questão. Nós vamos utilizar o jQuery para adicionar uma classe ao elemento nav. Essa classe vai possuir o atributo position:fixed. Além disso, nós vamos delimitar o quanto “em pixels” de rolagem vai ser necessário para que o menu possa se fixar no topo.

A classe em CSS fica assim:

Criei a classe .menuFixo com a propriedade position e adicionei as propriedades top com o valor 0 (zero) para deixar o menu no topo e o z-index com o valor 99 (noventa e nove) para fazer com que o menu não fique por trás de nenhum outro elemento.

OBS: o z-index é uma propriedade do CSS que trabalha com a profundidade dos elementos que possuem a propriedade position seja ela (fixed, relative ou absolute), portanto, se existirem outros elementos que possuam um z-index maior que 99 em seu CSS, aumente o valor da classe .menuFixo, pois o menu é o elemento que sempre deve estar acima dos demais.

PASSO 3: CRIANDO O SCRIPT

Agora que já temos o HTML e a classe em CSS pronta, vamos criar o script que vai fazer com que o efeito funcione.

Antes de continuar, lembre-se que é necessário ter a biblioteca jQuery incluso em seus js. Caso não saiba como fazer isso, leia o tutorial JQUERY PARA INICIANTES – PARTE 1 ou assista a video aula que preparei anteriormente.

Analisando o código

  1. Primeiramente nós armazenamos em uma variável o elemento #menuHeader, pois iremos utiliza-lo novamente mais para frente.
  2. Depois nós iniciamos uma função, tendo como elemento o window (que é a janela do seu monitor) e informamos que o método utilizado para essa função será o SCROLL.
  3. Criamos uma condição (if) que irá verificar se a rolagem da página será maior que (>) 150px. Essa verificação é possível pois estamos utilizando o método .scrollTop().
  4. Caso o usuário tenha rolado a página mais que 150px, nós iremos adicionar ao elemento #menuHeader a classe menuFixo;
  5. Caso o usuário não tenha rolado a página mais que 150px (else), nós iremos remover a classe menuFixo.

FINALIZANDO

Simples não?

Agora faça seus testes e qualquer dúvida não deixe de nos comunicar.

Muito obrigado e até a próxima.

TAGS: , ,

AUTOR: Gabriel Costa
Gabriel Costa

Trabalho com desenvolvimento web a mais de 5 anos e atualmente desenvolvo projetos para órgãos do governo federal na área de interface digital, programação e design. Tenho parceria na empresa AidWeb - Desenvolvimento web e trabalho desenvolvendo websites e protótipos de sistemas acessíveis e responsíveis.

ARTIGOS RELACIONADOS

13

Deixe o seu comentário!

  1. Alexandre disse:

    olá, não estou conseguindo baixar os códigos.

  2. Turbosite disse:

    Parabéns pela postagem, simples, rápido e prático construir este menu. Estou até pensando em utilizar em alguns sites.

    Att,

    Equipe Turbosite
    http://www.turbosite.com.br

  3. Christian Caires disse:

    Parabéns pelo post, me ajudou muito. Todos os scripts que eu testava bugava o layout da page. Por mais simples que esse FUNCIONA que é o mais importante. Valeu

  4. Muito obrigado por este conteúdo!
    Ficou perfeito para o que eu queria.

  5. Hugo Wesley disse:

    Boa explicação porem meu menu se sobrepôs em 1 dive q eu tinha em cima dele , é como se ele tivesse ficado transparente e as otras dives conseguissem ficar dentro dele

  6. Leo Franklin disse:

    Tentei fazer e a principio deu tudo certo, só que na visualização o menu aparece apenas no centro da página, e quando desço com a página ele centraliza para a direita sobrando a parte esquerda. Sou novo nisso.

Autentificado como . Sair desta conta »

<pre lang="aqui vai o tipo de linguagem (js, html, css, php...)">
   Agora você posta seu código a vontade!
</pre> //aqui você fecha o código