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

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é +

14 comentários em “JQuery: Menu encostado no topo da página ao rolar o scroll

  • 28 de setembro de 2012 em 15:29
    Permalink

    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
  • 3 de outubro de 2012 em 20:59
    Permalink

    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
  • 15 de julho de 2014 em 10:35
    Permalink

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

    Resposta
  • 17 de setembro de 2014 em 13:39
    Permalink

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

    Resposta
  • 23 de janeiro de 2015 em 16:07
    Permalink

    Bha achei bem legal, fácil de entender, Obrigada!

    Resposta
  • 28 de janeiro de 2015 em 21:14
    Permalink

    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
  • 14 de janeiro de 2016 em 22:33
    Permalink

    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
    • 18 de janeiro de 2016 em 12:18
      Permalink

      Olá Robson.

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

      Resposta
  • 11 de fevereiro de 2016 em 9:54
    Permalink

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

    Resposta
  • 31 de maio de 2016 em 0:58
    Permalink

    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
  • 1 de agosto de 2016 em 8:54
    Permalink

    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
  • 7 de novembro de 2016 em 13:52
    Permalink

    Muito obrigado mesmo.

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

    Parabéns .

    Resposta

Deixe uma resposta

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