Detect browser scroll not always

Asked

Viewed 54 times

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?

  • 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

  • use (window). scrolltop() or take the example https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

  • But you want me to cheer up when the scroll equals what? I’m sorry I didn’t notice

  • Your condition I believe could be anything like if($(window).scrollTop() < 10) instead of if($(window).scrollTop() > 0)

  • Hi, I edited the explanation

  • @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 is not that, I think you understood something else...

  • ok caio, if you want to give me the full code help you. send skype live:Sandro.

Show 4 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.