CSS: Deixar um div fixo e o outro rolar com a barra

Aprenda neste post como deixar um menu fixo enquanto rola a barra de rolagem.

Para tornar um div fixo, basta declarar position:fixed.

Código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style type="text/css">
#menu-vertical{
  position:fixed;
  z-index:999; 
  left:5px; 
  top:5px;
  overflow:hidden;
  border:1px dashed #CCC;
  padding:6px;
}
#principal{
  margin:0 auto;
  border:#000000 1px solid;
  width:790px;
  height:1200px
}
</style>
 
<div id="menu-vertical">
   <table cellpadding="0" cellspacing="0">
     <tr><td><a href="index.html">Página Inicial</a></td></tr>
     <tr><td><a href="quem-somos.html">Quem Somos</a></td></tr>
     <tr><td><a href="fotos.html">Fotos</a></td></tr>
     <tr><td><a href="contato.html">Fale Conosco</a></td></tr>
   </table>
</div>
 
<div id="principal"></div>

Observação:

– Na linha 15 foi setado um valor alto para height, de modo a ativar a barra de rolagem.

7 comentários em “CSS: Deixar um div fixo e o outro rolar com a barra

  • 26 de abril de 2012 em 0:33
    Permalink

    Esta solução deixa a barra alinhada para esquerda, caso alguém queira deixar centralizado, é só colocar a css abaixo:

    #menu-vertical{
    position:fixed;
    z-index:999;
    left:0%;
    right: 0%;
    top:0;
    overflow:hidden;
    }

    Resposta
  • 8 de outubro de 2012 em 14:51
    Permalink

    muito obrigado ajudo muito valeu 😉

    Resposta
  • 12 de outubro de 2015 em 1:21
    Permalink

    Eu passei por uns 5 sites até chegar a esse, que explicou de maneira simples o que todos os outros complicaram. Muito Obrigado!

    Resposta
  • 13 de janeiro de 2016 em 20:54
    Permalink

    impressionante, depois de dias procurando até em sites de especialistas que se dizem os melhores, aqui foi onde realmente encontrei de forma simples e que realmente funciona. Muito obrigado. Ajudou demaisssss.

    Resposta
  • 20 de maio de 2016 em 9:30
    Permalink

    Nossa que isso, o quanto eu procurei um que funcionava, ACHEII, Obrigado estou muito feliz

    Resposta

Deixe uma resposta

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