I have an animated header, when "scrolo" the site it changes some things with animate, that is, when $(this).scrollTop() > 0
(from 1 to 1 million, but only when it leaves position 0) it animates and returns to position 0 again, it encourages you to go back to the initial layout.
That is, it animates when it leaves position 0 and animates again if it returns to position 0 (only need to animate in these two moments
Code:
$(document).scroll(function() {
if($(this).scrollTop() > 0){
$('.topo_caixa').animate({backgroundColor: '#0033ff'}, 300);
$('.topo_caixa').animate({height: 50}, 300);
$('.topo_logo').animate({opacity: 0}, 200);
$('.topo_botao').animate({marginTop: 10}, 300);
$('.topo_botao a').animate({color: '#ffffff'}, 300);
$('.topo_botao_linha').animate({backgroundColor: '#ffffff'}, 300);
}else{
$('.topo_caixa').clearQueue();
$('.topo_logo').clearQueue();
$('.topo_botao').clearQueue();
$('.topo_botao a').clearQueue();
$('.topo_botao_linha').clearQueue();
$('.topo_caixa').animate({backgroundColor: '#f2f5ff'}, 300);
$('.topo_caixa').animate({height: 100}, 300);
$('.topo_logo').animate({opacity: 1}, 200);
$('.topo_botao').animate({marginTop: 33}, 300);
$('.topo_botao a').animate({color: '#0166ff'}, 300);
$('.topo_botao_linha').animate({backgroundColor: '#0166ff'}, 300);
}
});
The question is, when I'm running the site below, it keeps running the animate, because it drops in if($(this).scrollTop() > 0){...
and this ends consuming processing unnecessarily, because it visually does not influence.
I wanted it to perform the animation only when it's really needed, just the moment you exit scrollTop 0 or when you return to scrollTop 0