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.
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;
}
Fica a dica!
Obrigado Junior Freitas .
muito obrigado ajudo muito valeu 😉
Muito bom!
como fazer para ele ficar fixo somente quando o chegar o topo da página? Neste caso o conteudo está no meio da página na lateral, eu quero que quando rolar a pagina e o conteudo atingir o topo ele ficar fixo
Eu passei por uns 5 sites até chegar a esse, que explicou de maneira simples o que todos os outros complicaram. Muito Obrigado!
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.
Nossa que isso, o quanto eu procurei um que funcionava, ACHEII, Obrigado estou muito feliz
Não sei por que o meu continua como menu horizontal (em cima) ficou abaixo do menu do bootstrapp… gostaria de saber o porquê… Se alguém puder me ajudar, agradeço desde já!
Parabéns amigo !! Vlw
top certinho vlw