Question

There are two js scripts that bind to $(window).scroll(). In one script (example1.js) I have the need to unbind the event (or find an acceptable alternative) when certain criteria is met, but this causes the .scroll() event to be completely unbound, removing all functionality.

What I would like to do is, once the criteria has been met, stop the scroll event from firing for example1.js but not for example2.js.

example1.js

function exampleFunction(self) {
    $(window).scroll(function () {
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 364) {
            self.start();
        }
    });

    $.ajax({
        url: self.settings.dataUrl,
        dataType: "json",
        async: false,
        cache: false,
        success: function (json) {
            if (json.data.length) {
                self.json = json;
                self.addImages();
            } else {
                $(window).unbind('scroll');
            }
        }
    });
}

example2.js

$(window).scroll(function () {
    someFunction();
}); 

Answer 1

Take a look at Namespaced Events. This will allow you to namespace an event and then unbind only that namespace, leaving other bindings intact.

For Example:

// Create Bindings //
$(window).bind('scroll.example1', function(e){
    ...
});

$(window).bind('scroll.example2', function(e){
    ...
});

// Unbind ONLY .example1 Namespace //
$(window).unbind('scroll.example1');

I hope this helps!