How to detect if an item has scrolled, but only once?

advertisements

I am trying to detect if an element has been scrolled out and have done the following code

$(window).bind('scroll', function(){
    var $btn = $('#intro div.summary a[href=#top]');
    if($(window).scrollTop() > ($btn.offset().top+$btn.height())){
        console.log('out');
    }
});

I have an anchor in some body text, that I am hoping to clone and make a fixed nav out of once the div.intro is scrolled out.

My problem is that the code fires as soon as the element is out of view, but keeps firing. So I cannot do any more as anything more will keep firing.

Is there a way to fire 'out' once it's out and 'in' once it's in? Aside from just setting a variable.


To execute the event only once you can do

$(window).one('scroll', function(){
    var $btn = $('#intro div.summary a[href=#top]');
    if($(window).scrollTop() > ($btn.offset().top+$btn.height())) {
        console.log('out');
    }
});