Question

I have this script that run to fix my menu bar to the browser on scroll. Nothing really needs to change here (works as it should). However, you may need it…

var div = $('#wizMenuWrap');
var editor = $('#main_wrapper');
var start = $(div).offset().top;

$(function fixedPackage(){   
    $.event.add(window, "scroll", function() {
        var p = $(window).scrollTop();
        $(div).css('position',((p)>start) ? 'fixed' : 'static');
        $(div).css('top',((p)>start) ? '0px' : '');

        //Adds TOP margin to #main_wrapper (required)
        $(editor).css('position',((p)>start) ? 'relative' : 'static');
        $(editor).css('top',((p)>start) ? '88px' : '');
    }); 
});

Now for the issue at hand. I have another script function that calls a modal pop-up (which again works as it should). However, it’s not slick from a UI perspective when I scroll the page when the modals open. So I want to disable the script above when the modal script below is called. In other words, when I click to open the modal pop-up, the script above shouldn’t work.

$(function () {

var setUp = $('.setupButton');

// SHOWS SPECIFIED VIEW

$(setUp).click(function () {        
    $('#setupPanel').modal('show');
    //PREVENTS PACKAGE SELECT FIXED POSITION ON SCROLL
    $(setUp).unbind('click',fixedPackage);
});

})

As you can see above, I tried to unbind the scroll function (the first code snippet), but this is not correct.

These two scripts are in two separate js libraries.

Answer 1

I strongly disagree that you ought to be binding and unbinding the event. There’s no need! A little logic in your scroll event to check to see if the modal is open should take care of the issue:

$(function fixedPackage(){   
    $(window).bind("scroll", function() {

        // if the modal is displayed, do nothing
        if ($('#setupPanel').is(':visible'))
            return;

        // -- existing code here --
    }); 
});

This way, if the modal element is visible, the code simply stops where it is. Once you hide the element, the code will continue to work as before without having to manage the state of event in some other script… confusing!

Also, as mentioned in some other comments, don’t use $.event.add, use the public API method bind

Documentation

• jQuery is – http://api.jquery.com/is/
• jQuery visible selector – http://api.jquery.com/visible-selector/
• jQuery bind – http://api.jquery.com/bind/