Tenho uma div topoMaior
e quero que quando a pessoa der scroll de uns 50px, ela fique com top:0
.
Fiz isso com Jquery:
if ($(window).scrollTop() > 50){
$(".topoMaior").css("top","0");
}
E não rolou.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeAcho que falta nessa ideia o event handler que é ativado quando um scroll
acontece.
Pode fazer isso assim:
$(window).scroll(function () {
// correr código
});
Para juntar uma animação pode fazer assim:
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$(".topoMaior").stop().animate({top: 0});
$(".topoMaior").css("background", "#ccf");
} else {
$(".topoMaior").stop().animate({top: 200});
$(".topoMaior").css("background", "#669");
};
});
Se quiser pode fazer isso com CSS, que é a maneira mais correta, usando JS somente para aplicar uma classe. Exemplo:
$(window).scroll(function () {
if ($(window).scrollTop() > 50) $(".topoMaior").addClass('scroll');
else $(".topoMaior").removeClass('scroll');
});
.topoMaior {
padding: 20px;
background: #669;
position: fixed;
top: 100px;
width: 100%;
transition: all 1s;
}
.main {
height: 2000px;
}
.scroll {
top: 0px;
background-color: #ccf;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topoMaior"></div>
<div class="main"></div>
fixed
".topoMaior"
na página antes de aplicarestop: 0
? se colocares o HTML posso dar uma resposta com um exemplo