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 😉
Olá, fiz desta forma mas não funciona no I.E
Existe alguma outra forma?
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
como deixa a minha pagina do meu html alinhada pela direita do meu vido e com dar um zoo e deixar ele sempre maximizado, mesmo que tente abrir a tela inteira.
Fala Luiz,
Não entendi muito bem a sua dúvida. Teria como nos enviar um link da página para analisarmos melhor.
Olá consegui fixar no meu site um div de anúncios no desktop funciona perfeitamente, mas no mobile ele não fixa, pode me ajudar?
https://wordpress.alcionesytes.net esse é o link da minha página de teste
Alcione,
Adicione o seguinte o código e veja se funciona.
overflow: scroll;
-webkit-overflow-scrolling: touch;