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

admin 27 de setembro de 201227 de setembro de 2012 15 Comments height(), menu, scrollTop

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>

<!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>  <div id="topo" class="center"> <br /><br /> <p>CABEÇALHO DO SITE</p> <p>www.linhadecomando.com</p> </div>  <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>  <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é +

15 thoughts on “JQuery: Menu encostado no topo da página ao rolar o scroll”

Ademir Bastiani

28 de setembro de 2012 em 15:29

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
Leonardo Mateus

3 de outubro de 2012 em 20:59

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
- Tiago
  
  6 de outubro de 2012 em 8:05
  
  Obrigado Leonardo.
  Resposta
eric

2 de julho de 2014 em 16:57

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
Helcias

15 de julho de 2014 em 10:35

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

17 de setembro de 2014 em 13:39

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

23 de janeiro de 2015 em 16:07

Bha achei bem legal, fácil de entender, Obrigada!
Resposta
joão neto

28 de janeiro de 2015 em 21:14

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
Robson Costa

14 de janeiro de 2016 em 22:33

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
- Tiago
  
  18 de janeiro de 2016 em 12:18
  
  Olá Robson.
  
  Acabei de testar o código em navegadores diferentes, como: chrome, firefox, ie11 e microsoft edge, e funcionou sem problemas.
  Resposta
Jimmy Smith

11 de fevereiro de 2016 em 9:54

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

31 de maio de 2016 em 0:58

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
Antonio

1 de agosto de 2016 em 8:54

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
- Tiago
  
  1 de agosto de 2016 em 9:01
  
  Olá Antonio.
  
  O plugin que usamos está neste link: http://risq.github.io/jquery-advanced-news-ticker/
  
  Obrigado por participar do blog.
  Resposta
Danilo Godoy

7 de novembro de 2016 em 13:52

Muito obrigado mesmo.

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

Parabéns .
Resposta

Você pode gostar também

JQuery: Zebrando linhas da tabela

JQuery: Setando e obtendo o valor em um textarea

Jquery: Evento Change()

15 thoughts on “JQuery: Menu encostado no topo da página ao rolar o scroll”

Deixe um comentário Cancelar resposta