0
I have an animated header, when "scrolo" the site it changes some things with Animate, IE, when the $(this).scrollTop() > 0
(from 1 to 1 million, but only when it leaves position 0) it animates and turns to position 0 again, it animates to return to the initial layout.
That is, it animates when it leaves the 0 position and animates again if it returns to the 0 position (it would 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 point is, when I’m scrolando the site down there, it keeps running the Animate, because it falls in the if($(this).scrollTop() > 0){...
and this ends up consuming processing unnecessarily, because visually does not influence.
I wanted him to perform the animation only when it’s really necessary, only the moment he comes out of the scrollTop 0 or when it comes back to scrollTop 0
Just want to even when the scroll is 0, IE, the animation only occur when the scroll all up there?
– Miguel
When it is 0 and when it is not. The problem is that in the function I made, if I roll to scroll 100 and roll to scroll 200, it runs Animate, even without needing
– caiocafardo
use (window). scrolltop() or take the example https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
– KingRider
But you want me to cheer up when the scroll equals what? I’m sorry I didn’t notice
– Miguel
Your condition I believe could be anything like
if($(window).scrollTop() < 10)
instead ofif($(window).scrollTop() > 0)
– Miguel
Hi, I edited the explanation
– caiocafardo
@caiocafardo is not try (this), does not work, it calls Document this only paper, has to use window for global.
$(document).ready(function() { if((window).scrollTop() > 0){
– KingRider
@Kingrider is not that, I think you understood something else...
– caiocafardo
ok caio, if you want to give me the full code help you. send skype live:Sandro.
– KingRider