Div fixa a partir de uma posição da scroll

[O8oO 0]

Olá, estou com uma duvida.

 

Eu gostaria fazer algo deste tipo

www.fazchover.com.br

www.meutimao.com.br

 

Reparem nos menus, eles começam a acompanhar a scroll quando encosta o topo nela.

 

Gostaria que a div acompanhasse o topo do site depois de certo ponto.

 

Como faço isso?

[Ted k' 126]

Simples, olha só, pode usar o jQuery:

 

Você precisa primeiro de uma função para saber em px quanto a rolagem, segue dica:

 

Faz um IF para quando chegar a tal px, você para o script e fixar a DIV.

$(window).scroll(function(){
valor_atual = $(document).scrollTop();
if (valor_atual >= 600){
fixa div...
}
else {
deixa como estava a div...
}
});
 

E depois é só usar o CSS com position: fixed; top 0; left: 0;

Mas ai você usar os cálculos do CSS para posicionar onde quer.

[O8oO 0]

Não funcionou :/ Coloquei fixed e coloquei abaixo do meu topo. Mas não aparece o menu :/

 

 

<script type="text/javascript">
$(window).scroll(function(){
valor_atual = $(document).scrollTop();
if (valor_atual >= 250){
<div id="menu2"><div class="con"><ul><li> <a href="#">Página Inicial</a></li><li> <a href="#">Quem Somos</a></li><li> <a href="#">Orçamento</a></li><li> <a href="#">Galeria de Fotos</a></li><li> <a href="#">Localização</a></li><li> <a href="#">Contato</a></li></ul></div></div>}
else {
<div id="menu"><div class="con"><ul><li> <a href="#">Página Inicial</a></li><li> <a href="#">Quem Somos</a></li><li> <a href="#">Orçamento</a></li><li> <a href="#">Galeria de Fotos</a></li><li> <a href="#">Localização</a></li><li> <a href="#">Contato</a></li></ul></div></div>}
 
});</script></div>

[Ted k' 126]

Desculpa a demora, estava viajando...

 

Cara... você não fez exatamente como está ai no seu código, não é?

Pois o que dei foi só exemplo...

 

 

 

$(window).scroll(function(){
valor_atual = $(document).scrollTop(); 
var div = $("#div");
if (valor_atual >= 600){
div.addClass("fixar");}
else {
div.removeClass("fixar");}
});

 

Desculpa mas me recuso a acreditar que você jogou um HTML dentro do IF do javascript exatamente como postou!