打开菜单时蒙版/覆盖在页面上

Mask/overlay over page when menu is opened

本文关键字：覆盖 打开菜单      更新时间：2023-09-26

我的脚本遇到了一些问题，我正在尝试弄清楚如何在打开菜单时在网站上制作掩码/过滤器。在HTML中有一个名为cmask的类，还有一个称为cmask的类是-active的仅当屏幕小于 900px 时，它才需要执行此操作。我一直在尝试使用 cmask.addClass（"is-active"） 和 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;
}

首先，我会在所有可能适合的语句中添加分号，以确保您不会错过强制性的分号。

我做了一个小的叠加蒙版示例

爪哇语

$('#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/

相关文章：