JQuery

JQuery: Menu encostado no topo da página ao rolar o scroll

admin

Olá pessoal, vamos a mais um post.

Este post tem a colaboração de Renan Lopes. O linhadecomando.com cresce a cada dia e a cada dia conhecemos pessoas bacanas que gostam de programação e compartilham seus conhecimentos.

Continuem conosco!

Qual é a idéia?

Fazer um menu vertical flutuante, prender-se ao topo do navegador, quando correr a barra de rolagem.

Vamos ao código:

Arquivo css – style.css

*{ 
    margin:0; 
    padding:0; 
    font-family:Arial, Helvetica, sans-serif;
    list-style:none;
    text-decoration:none;
}
a{ color:#000000 }
a:hover{ color:#FFFFFF; text-decoration:underline }
.center{ 
    margin:0 auto;
    overflow:hidden;
}
.clear{ clear:both }
h3{ color:#FFFFFF;padding-bottom:5px; border-bottom:1px solid #FFF; }
#topo{ 
    width:960px; 
    height: 120px;
    background-color:#0099FF;
    color:#FFFFFF;
}
#topo p{ text-align:center }
#conteudo {
    width: 960px;
    min-height:750px; /* altura mínima */
}
#menu{
    float:left;
    width:200px;
    padding:10px;
    position:fixed;
    background-color:#66CCFF;
    z-index:9;
}
ul.menu{ padding-top:5px; }
ul.menu li{ padding: 5px 0; }
#dados { 
    float:right;
    width:700px;
    padding:20px;
}
#rodape {
    clear:both;
    background-color: #ADD8E6;
    color: #FFF;
    height:200px;
    line-height:200px;
    font-size:18px;
}

Código que faz a mágica – sempre você, né JQuery!

<script type="text/javascript">
$(function() {
$(window).scroll(function()
{
var topo = $('#topo').height(); // altura do topo
var rodape = $('#rodape').height(); // altura do rodape
var scrollTop = $(window).scrollTop(); // qto foi rolado a barra
var tamPagina = $(document).height(); // altura da página
 
if(scrollTop > topo){
  $('#menu').css({'position' : 'absolute', 'margin-top' : scrollTop - (topo-5)});
}else{
  $('#menu').css({'position' : 'relative', 'margin-top' : 0});
}               
});
});
</script>

Código completo – index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery - Menu Flutuante com Scroll</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function()
{
var topo = $('#topo').height(); // altura do topo
var rodape = $('#rodape').height(); // altura do rodape
var scrollTop = $(window).scrollTop(); // qto foi rolado a barra
var tamPagina = $(document).height(); // altura da página
 
if(scrollTop > topo){
  $('#menu').css({'position' : 'absolute', 'margin-top' : scrollTop - (topo-5)});
}else{
  $('#menu').css({'position' : 'relative', 'margin-top' : 0});
}               
});
});
</script>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<!-- topo -->
<div id="topo" class="center">
  <br /><br />
  <p>CABEÇALHO DO SITE</p>
  <p>www.linhadecomando.com</p>
</div>
<!-- conteudo -->
<div id="conteudo" class="center">
<div id="menu">
<h3>Menu</h3>
 <ul class="menu">
  <li>Home</li>
  <li>Sobre</li>
  <li>Contato</li>
 </ul>
</div>
<div id="dados">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<br />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<br />
</div>
</div>
<!-- rodape -->
<div id="rodape" class="clear">
  <p align="center">RODAPÉ DO SITE</p>
</div> 
</body>
</html>

Veja o funcionamento desse script, clicando aqui.

Espero que gostem! Até +

Você pode gostar também

JQuery: Saber se um campo do tipo checkbox está selecionado

admin

JQuery: Validation Plugin – validação de e-mail

admin

JQuery: Exibindo menu conforme resolução do monitor

admin

17 comentários sobre “JQuery: Menu encostado no topo da página ao rolar o scroll”

  • Opa funcionando perfeitamente no meu site, mas com uma obs: quando abro o menu que é de sanfona no ie, o menu passa por cima do footer no firefox não o que devo fazer fazer para corrigir este bug.

    Grande abraço.

    Resposta

  • A variável “tamPagina” no script js não está sendo usada.. =)
    Mas enfim entendi como se faz esta técnica.. valeu a dica aê!! =P

    Resposta

  • Pessoal.

    Preciso de um help. Eu tenho um código muito semelhante, que estou substituindo por este que fizeram. Porém preciso que ao invés do menu ficar no topo, ele fique acima do rodape. Ou seja ele acompanha a página até chegar no rodape.

    Alguem sabe como ajudar?

    Resposta

  • Estou tentando utilizar este código, obrigado por postar.
    Gostaria que a barra de cima ficasse tomando toda a extensão da tela, como acontece no facebook.
    Mas, o tamanho do site continuasse com 1024. Vou tentar colocar uma div na esquerda fixa onde estará o menu, outra no centro com o conteúdo (dinâmica), outra a direita também com o conteúdo (dinâmica) e outra a direita fixa que será para anúncios.

    Agradeço a colaboração

    Resposta

  • E para este menu parar de rolar no rodapé da página?
    Da maneira que está se eu aumentar o rodapé ele passará por cima, não quero isso.

    Resposta

  • Muito bom!! Perfeito.
    Obrigado por colaborar com a distribuição da informação.
    Parabéns!

    Resposta

  • Legal. Procurava por isso.. e bem igual o do google play! muito bom.

    Resposta

  • caralhooooooooooo, voces sao fodas to a uma semana achando isso vlw cara eh serio parabens pelo que voces tao fazendo vcs sao fodas sao os caras

    Resposta

  • Sei que já é um post antigo, mas estou com um problema que não sei como resolver nesse script, quando utilizado no firefox funciona perfeitamente, mas em todos os outros navegadores o menu fica se escondendo e voltando quando há rolagem para baixo e quando volta para o topo ele fica perdido no meio da página sem acompanhar o passo da rolagem. Se alguém puder ajudar agradeço.

    Resposta

    • Olá Robson.

      Acabei de testar o código em navegadores diferentes, como: chrome, firefox, ie11 e microsoft edge, e funcionou sem problemas.

      Resposta

  • Olá,
    Fortalecendo a afirmação do Robson, no Explorer 11 não funciona.
    Caso alguém saiba como corrigir o bug…

    Resposta

  • Fiz pequenas adaptações em seu código e consegui fazer o que eu desejava. Muito obrigado por contribuir, procurei muito por essa simples solução. Grande abraço.

    Resposta

  • Muito bom artigo. No topo desta página há a exibição de títulos de artigos que se alternam. Não sei o nome do evento. Isso ocorre à frente da palavra “últimos”. Como se chama esse evento e há, aqui no site, o código para ele? Grato.

    Resposta

  • Muito obrigado mesmo.

    Seu artigo está ótimo, simples e direto. Me ajudou com um problema reportado por alguns clientes.

    Parabéns .

    Resposta

Deixe um comentário

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