javascript - 打开菜单时 mask /覆盖页面

我的脚本有点问题，我想弄清楚当菜单打开时如何在网站上制作一个掩码/过滤器。在HTML中有一个名为cmask的类，还有一个名为cmask is active的类
只有当屏幕小于900像素时，它才需要这样做。我一直在尝试使用cmask.addClass（“是活动的”）和removeclass，但它不是这样工作的，而且它一直崩溃（使脚本的另一部分不再工作）。有人知道我做错了什么吗？

//scrolling----------------
//scrolling----------------
//scrolling----------------
var nav = $("#nav_id");
var nav_overflow = $("#nav_overflow");
var page_end_logo_nav = $("#page_end_logo_nav").visible();
var logo_container = $("#logo_container");
var nav_ani_speed = 200 //in ms
var nav_state = 0 // 0 is nav  1 is hamburger visable
var hamburger = $("#hamburgermenu") //hamburger elemnt
var distanceY;
var shrinkOn;
var winkel_mand = $("#winkel_mand")

//set scroll for desktop nav
function nav_desktop_check() {
    distanceY = window.pageYOffset || document.documentElement.scrollTop;
    shrinkOn = 100;

    //run the header script
    if (distanceY > shrinkOn) {
        if (nav_state === 0) {
            nav_hamburger();
        }
    } else {
        if (nav_state === 1 ){
            if ($(window).width() >= 900){
                nav_normal_desktop();
            }
        }
    }
}

//tablet nav check
function tablet_nav_check() {
    if (nav_state === 0){
        if ($(window).width() <= 900){
        nav_hamburger();
        }
    }
}
tablet_nav_check()


//hambutton onclikc
hamburger.click(function() {
    if (nav_state === 1){
        if ($(window).width() >= 900){
        nav_normal_desktop();
        } else {
            nav_normal_mobile();
        }

        logo_animation();
        remove_winkel_icon_check()
    } else{
        nav_hamburger()
    }


});

//nav to hamburger
function nav_hamburger() {
    hamburger.removeClass("active")
        nav_overflow.animate({
        width: 0
      }, nav_ani_speed, function() {
            hamburger.addClass("active")
      });
    nav_state = 1;
    logo_animation();
}

//hamburger to nav
function nav_normal_desktop() {
    hamburger.addClass("active");
    hamburger.removeClass("active");
    nav_overflow.css("width", "auto");
    nav_witdh = nav_overflow.innerWidth();
    nav_overflow.css("width", 0);
    nav_overflow.animate({
        width: nav_witdh
    }, nav_ani_speed, function() {
        hamburger.removeClass("active")
    });
    nav_state = 0;

}
function nav_normal_mobile() {
    nav_overflow.animate({
        width: "100%"
    }, nav_ani_speed, function() {
        hamburger.removeClass("active")
    });
    nav_state = 0;
}

最佳答案

首先，我会在所有可以容纳分号的语句中添加分号，以确保您没有遗漏一个必需的分号。
我做了一个小的覆盖遮罩的例子
Javascript

$('#element').on("click",function() {
  if($('#overlay').length == 0) {
        $(this).wrap('<div id="overlay"><div>');
  } else {
    $(this).unwrap();
  }

});

CSS

#element {
  width:200px;
  height:200px;
  background-color:#f00;
}

#inner {
  width:100px;
  height:100px;
  background-color:#0ff;
}

#overlay
{
  background-color:#000;
  opacity:0.3;
  width:200px;
  height:200px;
}

http://jsfiddle.net/5aw0wsy4/