Функция jQuery/JS работает только при нажатии кнопки

Question

Я сделал функцию jQuery следующим образом:

jQuery(document).ready(function ($) {
    $("#mmenu").hide();
    $("#cover").hide();
    var wys = $('#mmenu').height();
    console.log('wys: ' + wys);
    $(".mtoggle").click(function () {
        $("#mmenu").slideToggle(500);
        $("#cover").fadeToggle("400", "swing");
        $(window).scroll(function (e) {
            if ($(window).scrollTop() > wys) {
                var limit = wys + 50;
                $(window).scrollTop(limit);
            }
        });

        $(window).scrollTop(wys);

    });
});

Это переключает меню #mmenu, исчезает или исчезает #cover div, который затемняет всю область за меню и отключает прокрутку в определенной точке. Проблема в том, что я хочу, чтобы функция scrollTop работала только при открытом меню (когда нажата кнопка) и прекращала работу, если меню снова скрыто. Пока он начинает работать, когда я открываю меню, но когда я закрываю его, прокрутка остается отключенной. Как сделать так, чтобы эта функция работала только при открытом меню?

Answer 1

Если я правильно понимаю ваше требование, то вам нужно зарегистрировать / удалить обработчик прокрутки в зависимости от того, открыто ли меню или закрыто.

Одним из простых решений является использование флага, как показано ниже

jQuery(document).ready(function ($) {
    $("#mmenu").hide();
    $("#cover").hide();
    var wys = $('#mmenu').height();

    //flag to keep track of open status
    var open = false;

    console.log('wys: ' + wys);
    $(".mtoggle").click(function () {
        $("#mmenu").slideToggle(500);
        $("#cover").fadeToggle("400", "swing");

        //if already opened then remove the handler
        if (open) {
            $(window).off('scroll.menuopen');
        } else {
            //if opening now then register the handler
            $(window).on('scroll.menuopen', scrollHandler);
            $(window).scrollTop(wys);
        }
        //toggle the open status
        open = !open;
    });

    function scrollHandler(e) {
        if ($(window).scrollTop() > wys) {
            var limit = wys + 50;
            $(window).scrollTop(limit);
        }
    }
});

Answer 2

Вы можете проверить, является ли меню :visible

jQuery(document).ready(function ($) {
    $("#mmenu").hide();
    $("#cover").hide();
    var wys = $('#mmenu').height();
    console.log('wys: ' + wys);
    $(".mtoggle").click(function () {
        $("#mmenu").slideToggle(500);
        $("#cover").fadeToggle("400", "swing");
        if($("#mmenu").is(':visible')){ //BEGIN - Check whether the menu is visible
            $(window).scroll(function (e) {
                if ($(window).scrollTop() > wys) {
                    var limit = wys + 50;
                    $(window).scrollTop(limit);
                }
            });
            $(window).scrollTop(wys);
        } //END


    });
});