Saiba como fixar seu menu no topo do site após scroll
ProgramaçãoHoje 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.
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.
PASSO 1: A ESTRUTURA HTML
O HTML do nosso menu é bastante simples, somente uma lista não ordenada como padrão:
|
1
2
3
4
5
6
7
8
9
|
<nav id=“menuHeader”>
<ul>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>Produtos</a></li>
<li><a href=“#”>Lojas</a></li>
<li><a href=“#”>Empresa</a></li>
<li><a href=“#”>Contato</a></li>
</ul>
</nav>
|
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:
|
1
2
3
4
5
|
.menuFixo {
position: fixed;
top: 0;
z-index: 99;
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<script>
$(function(){
var nav = $(‘#menuHeader’);
$(window).scroll(function () {
if ($(this).scrollTop() > 150) {
nav.addClass(“menu-fixo”);
} else {
nav.removeClass(“menu-fixo”);
}
});
});
</script>
|
ANALISANDO O CÓDIGO
- Primeiramente nós armazenamos em uma variável o elemento
#menuHeader, pois iremos utiliza-lo novamente mais para frente. - 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.
- 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().
- Caso o usuário tenha rolado a página mais que 150px, nós iremos adicionar ao elemento
#menuHeadera classemenuFixo; - Caso o usuário não tenha rolado a página mais que 150px (else), nós iremos remover a classe
menuFixo.