How to reengage scroll event?

Question

This time I have a slider which should run everytime when it's visible, and to stop it when it's hidden (outside the window). I have all of the code working, but I dont know how to temporarly block scroll event.

Code:

$(window).on('scroll', function() {
    if ($('.tour-slider').visible(true)) {
        slideshow();
        $(window).off('scroll');
    }else{
        anim1.pause();
        anim2.pause();
        anim3.pause();
        $('#slider-1').siblings().hide();
    }
});

This code works but only once, if tour-slider is visible, then the scroll event turns off and thats it. But I want to block scroll event only when user see element .tour-slider in other case this event should work again.

do on scroll > if .tour-slider visible do off scroll > if .tour-slider hidden do on scroll again

Any suggestions?

Answer 1

May you can add a flag to know if your animation is started or not and keep the event binding.

Like something like that :

var _animated = false;

var Slideshow = {
    start: function () {
        if (_animated) return;
        _animated = true;
        // start slideshow
    },
    stop: function () {
        if (!_animated) return;
        _animated = false;
        // stop animation
    }

};

$(window).on('scroll', function () {
    if ($('.tour-slider').visible(true)) {
        Slideshow.start();
    } else {
        Slideshow.stop();
    }
});