Jquery trigger animation once on scroll

Question

Trying to trigger an animation once on scroll, but it triggers multiple times.

$(window).scroll(function(){
  var y = $(window).scrollTop();
  var flagscroll=true;
  if( y < 30 && y > 20 && flagscroll==true ) {
        flagscroll=false;
       $('[data-label="SearchPanel"]').animate({ 
            top: "-=34px",
        }, 200 );
  }
});

What am I missing here? Thanks for your ideas!

Maxwell Donathan · Accepted Answer · 2014-07-14 16:12:29Z

3

Your flag is always set back to true for every scroll event. You must place the initialization outside of the event function declaration:

var flagscroll=true;

$(window).scroll(function(){
    var y = $(window).scrollTop();
    if( y < 30 && y > 20 && flagscroll==true ) {
        flagscroll=false;
        $('[data-label="SearchPanel"]').animate({ 
            top: "-=34px",
        }, 200 );
    }
});

answered Jul 14, 2014 at 16:12

Maxwell Donathan

1,53710 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arunkumar Vasudevan · Accepted Answer · 2014-07-14 16:12:55Z

0

set var flagscroll=true; before $(window).scroll

like

var flagscroll=true;
$(window).scroll(function(){
var y = $(window).scrollTop();
if( y < 30 && y > 20 && flagscroll==true ) {
    flagscroll=false;
   $('[data-label="SearchPanel"]').animate({ 
        top: "-=34px",
    }, 200 );
}
 });

answered Jul 14, 2014 at 16:12

Arunkumar Vasudevan

5,3684 gold badges30 silver badges41 bronze badges

Collectives™ on Stack Overflow

Jquery trigger animation once on scroll

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related