Menu scroll fixo com jQuery

Aprender como criar um menu scroll fixo com jQuery é muito simples!

Menu scroll fixo é muito usado em sites com rolagens automáticas. Este tipo de menu está cada vez mais comum hoje em dia, além de deixar seu site mais elegante o menu fixo facilita e muito a vida dos usuários, principalmente se o seu conteúdo for muito extenso.

 

Uma das alternativas que vários sites usam para facilitar a navegação dos seus usuários é a tão famosa seta de voltar ao topo. Voltar ao topo com intuito é claro de ter acesso ao menu principal, mas com este menu fixo o usuário já está com todas as alternativas do menu disponíveis sempre que for necessário, podendo também voltar ao topo como no caso da seta.

 

É preciso tomar cuidado com o tamanho desse tipo de menu scroll fixo, não é muito bom escolher menus muito grandes por causa do espaço que ele vai ocupar na tela do usuário. Como na maioria do tempo o usuário vai estar na parte baixa do site, o menu praticamente vai estar sempre ali fixo, ocupando sempre um bom espaço na tela.

 

Cada dia que passa podemos ver monitores cada vez maiores, mas não podemos esquecer que ainda não são a maioria que usa monitores grandes e ainda temos a questão de outros dispositivos.

 

menu-scroll-fixo-jquery-criarsites

 

Visualizar Exemplo

 

 

Existe inúmeros scripts para fazer este tipo de menu scroll fixo na web, mas eu usei este por ser simples e em poucas linhas já esta tudo funcionando.

É o mesmo que usei para fazer o tutorial criar sites html5 menu fixo. Resolvi fazer este tutorial mais específico por se tratar de um sistema de navegação muito utilizado e que tem uma grande procura.

Veja o código HTML do menu.

Podemos ver um menu simples com uma div que envolve todo o menu com largura 100%, e mais a sessão nav que formatei para que ficasse no centro utilizando margin:0 auto; no CSS. Basicamente o que temos que fazer para fixar qualquer sessão em CSS é atribuindo uma classe com posição fixa.

Bem, já sabemos que para fixar nosso menu usaremos uma classe no CSS para fixa-la. Mas quem vai substituir nossa classe que no seu modelo inicial está rolando junto com todo o conteúdo? Aí é que entra o fabuloso jQuery e o script para fazer o serviço cada vez que o usuário rolar a página.

 

O script vai fazer a substituição da classe CSS .nav-total, que normalmente ficaria estática lá no topo, por outra que, ao rolar a página, o script aciona a classe .f-nav com posição fixa fazendo nosso menu flutuar.

 

Veja as classes CSS que serão substituídas:

Veja o script que vai fazer o serviço de substituição da classe:

O script faz o seguinte, primeiro ele atribui a sessão nav à classe .nav-total, blz! Estão juntas e nada acontece! Mas aí ele diz, se rolar a página ate 100px adicione a classe f-nav que é justamente a classe que teremos o atributo fixed no nosso CSS, se não, remova a classe f-nav. Essa parte quer dizer que se tudo voltar ao zero ele irá remover a classe f-nav voltando tudo ao normal.

Dependendo da configuração de seu site e a distância que o menu ficar do topo, você tem que mudar essa medida em pixel, adicionando a distância exata para o menu não fixar antes da hora.

Como fazer a chamada dos scripts no seu site:

Basta inserir o link do jQuery, caso seu site ainda não tenha, e o script entre as tags head do seu site! Ou se preferir também podemos colocar no rodapé, na tag footer.

Bem, criamos nosso menu scroll fixo adicionando apenas um pequeno script e mais uma classe no CSS. Se caso você ainda não utiliza o jQuery em seu site você pode estar fazendo o download no site oficial.

Espero ter esclarecido algumas dúvidas deixadas no tutorial anterior, mas caso ainda tenha alguma dúvida deixe seu comentário que eu estarei respondendo a todos.

Para receber os próximos tutoriais gratuitos se inscreva em nosso FEED logo abaixo, insira seu e-mail e não esqueça de ativar o e-mail de confirmação.

Até a próxima!

Leave a Reply

28 comments

  1. Muito obrigado cara, é o que eu estava procurando…

    -1
  2. Tem algum tutorial para quando por exemplo a pessoa clica no menu a página faz um scroll automaticamente para onde está determinada coisa? Por exemplo: A pessoa clica em contato que está na mesma página e o scroll vai parar nesse box?

    -1
    • Olá Mateus, aqui mesmo no site temos um tema gratuito em HTML5, clique aqui e confira o tema, e faça o download. Qualquer dúvida estamos aqui! Abraço!

      -1
  3. Mano meus parabéns! Assim poderei colocar o site , no meu portal! mas se não gostás ok !

  4. Get

    Muito bom!! Pretendo aprender muito.

  5. Muito, muito obrigada!!! super bem explicado, nossa me ajudou muito, vou consegui entregar um ótimo projeto. Valeu!!!

  6. como faço isso no wordpress ? já procurei varias alternativas na internet e visitei umas 10 paginas, nenhuma dica funcionou.

    • Olá Eder, dependendo do tema WP que vc escolher acho se adaptar o menu e adicionar o script acho que funciona bem, basta você colocar o menu na div certa que o script vai atacar quando a página for rolada. Abraço!

  7. moysés

    Muito top o artigo. mas queria saber o seguinte.

    Na hora que a pessoa baixar o site, queria colocar outra coisa alí em cima! como faço!?

    pode me ajudar?

    • Olá Moizés, o script substitui as classes de uma div class que está rolando por uma class fixa, caso você queira colocar outra coisa no lugar do menu basta você substituir o conteúdo da div colocando o que você quiser e formatar. Acho que funciona assim, mas qualquer dúvida de um alo6 ai que resolvemos isso juntos. Abraço!

  8. Charles Silva

    Bom dia.

    Desculpe minha ignorancia, mas como faço para funcionar tambem no Internet Explorer 8 e 9? Abraço.

  9. MARCELO

    OLA AMIGO GOSTARIA DE SABER SE TEM COMO FAZER ESSE EFEITO SCROLL NO WIX

    • Olá Marcelo, os sites do WIX são de códigos fechados, mas você pode achar algum tema deles com efeito semelhante, caso queira fazer o efeito no WordPress creio que já tem alguns temas gratuitos com esse efeito.

  10. Diogo F.

    Olá Everton! Gostei muito do tutorial e me ajudou bastante. Tenho uma dúvida: Quando desço levemente o scroll acontece um pequeno salto. Ex.: Ao descer devagar, a imagem da seta branca do seu exemplo ai do “demo” parece que salta alguns pixels. Porque isso acontece? O meu exemplo aqui tem acontecido a mesma coisa…

    De qualquer forma, muito obrigado, já ajudou muitíssimo!

    -1
    • Olá Diego, esse erro eu ja percebi, eu tentei algumas formas resolve-lo, mas é tudo por causa das divs adicionais que eu coloquei por questões de design mesmo, se fizer um modelo simple ocorre tudo ok! Vou deixar a correção para o próximo modelo. Obrigado pelo seu comentário!

  11. Eduardo Broska

    Cara, to com uma duvida…
    quero fazer este menu (que rola com a pagina) mas gostaria que ele tivesse sub-menus.. tem como?

    • Eduardo acho que se você fizer todo o processo de sub menus ele vai responder da mesma maneira, depois de rolar a página o menú estaria completo, apenas vai ser adicionado uma class para que ele flutue. Abraço!

  12. Olá Everton!

    Muito bom esse artigo. Simples, rápido e muito fácil de implementar.

    Acabei de implementá-lo no meu blog [www.brunocunha.com] e funcionou perfeitamente.

    Abs!

    Bruno Cunha

    -1
  13. Olá, Everton.

    Meus parabéns! Excelente artigo. Objetivo e com uma linguagem clara.

    Continue com o excelente trabalho. Abçs

  14. Helio Souza

    Simples e eficiente. Parabéns!

    Entretanto me chamou mais atenção este que tu usas em teu site. Um segundo menu que só aparece quando a tela rola para baixo e ainda tem efeito de transição! Poderia ampliar a dica? Valeu!

Pin It on Pinterest

Shares

Compartilhe!

Mostre esse post para seus amigos.