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

Question

I am trying to detect if an element has been scrolled and made 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 hope to clone and make fixed navigation after div.intro scrolls.

My problem is that the code fires as soon as the element leaves the field of view, but continues to shoot. Therefore, I can’t do it anymore, as it will shoot more and more.

Is there any way to shoot “out” after it comes out and “in” after turning it on? Besides just setting a variable.

Answer 1

To execute an 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');
    }
});

Answer 2

, unbind :

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