JQuery Dimmer和No Scrolling不會一起工作

Question

當我的網站在移動視圖中時，我有一個漢堡菜單，我可以用JQuery切換和切換。這工作正常，但帶來更多的重點，我已經嘗試添加一個調光器效果的主要內容，並試圖阻止滾動到漢堡菜單顯示時的主要內容。但是，當我這樣做時，我可以讓調光器工作或不滾動單獨工作（如果我註釋掉其中一個或另一個），但由於某些原因，它們在合併時不工作，我不知道爲什麼（如下所示）。另外，當只做不滾動時，它跳到身體的底部，我不希望出現這種情況。我對JQuery相當陌生，所以如果我所做的事情可以被壓縮或變得更好，請讓我知道。

JQuery的：

jQuery(document).ready(function() { 
jQuery('#toggle-nav').click(function (e) { 
event.stopPropagation(); 
jQuery(this).toggleClass('active'); 
jQuery('.menu ul').toggleClass('active'); 
jQuery('.hamburgerWrapper').toggleClass('active'); 

//Dimmer 
jQuery('.dimmer').toggleClass('active'); 

//No Scrolling 
jQuery('.main').toggleClass('no-scrolling'); 

e.preventDefault(); 
}); 
}); 

CSS：

.main 
{ 
    background-color: white; 
    width: 100%; 
} 

.mainWrapper 
{ 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
    background-color: white; 
    flex: 1;  
} 

/*NAVIGATION MENUS*/ 
.nav 
{ 
    background-color: blue; 
    z-index: 1; 
} 

.navWrapper 
{ 
    display: flex; 
    justify-content: flex-start; 
    flex-wrap: wrap; 
    flex-direction: column; 
    flex-grow: 1; 
} 

/*HORIZONTAL MENU*/ 
.menu 
{ 
    flex-grow: 1; 
} 

.menu ul.navList 
{ 
    list-style: none; 
    position: fixed; 
    left: -60%; 
    background: blue; 
    min-width: 60%; 
    transition: all 600ms ease; 
    z-index: 1; 
} 

.menu ul.active { 
    left: 0; 
    transition: all 300ms ease; 
} 

.menu > ul > li > a 
{ 
    text-align: left; 
    display:block; 
    color: #F5F5F5; 
    padding:16px 16px 12px 16px; 
    border-bottom:4px solid transparent; /*To offset white underline hover*/ 
    font-weight: 700; 
} 

.menu > ul > li a:hover 
{ 
    background-color: green; 
    border-bottom: 4px solid #F1F227; 
    color: #C5EFF7; 
    transition: 1s ease-out; 
} 

/*HAMBURGER*/ 
.hamburgerWrapper 
{ 
    display: flex; 
    flex-grow: 1; 
    justify-content: flex-start; 
    left: 0; 
    position: absolute; 
    width: 100%; 
    background-color: blue; 
    transition: all 600ms ease; 
    z-index: 2; 
    vertical-align: middle; 
} 

.hamburgerWrapper.active 
{ 
    left: 60%; 
    transition: all 300ms ease; 
    padding-left: 20px; 
} 

.hamburger 
{ 
    list-style-type: none; 
} 

.hamburger li a 
{ 
    text-align: center; 
    display:block; 
    color: #fff; 
    padding:16px 16px 15px 16px; 
    cursor: pointer; 
    font-weight: 700; 
} 

#toggle-nav:after { 
    padding-left: 20px; 
    display: inline-block; 
    vertical-align: middle; 
    content: 'Menu'; 
} 

#toggle-nav span, #toggle-nav span:before, #toggle-nav span:after { 
    cursor: pointer; 
    border-radius: 1px; 
    height: 5px; 
    width: 35px; 
    background: white; 
    display: inline-block; 
    vertical-align: middle; 
    position: relative; 
} 
#toggle-nav span:before { 
    display: block; 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: -10px; 
} 
#toggle-nav span:after { 
    display: block; 
    content: ''; 
    position: absolute; 
    left: 0; 
    bottom: -10px; 
} 

#toggle-nav span, #toggle-nav span:before, #toggle-nav span:after { 
    transition: all 500ms ease-in-out; 
} 
#toggle-nav.active span { 
    background-color: transparent; 
} 
#toggle-nav.active span:before, #toggle-nav.active span:after { 
    top: 0; 
} 
#toggle-nav.active span:before { 
    transform: rotate(45deg); 
} 
#toggle-nav.active span:after { 
    transform: rotate(-45deg); 
} 

/*Sub Menu*/ 
.menu > ul > li:hover > ul 
{ 
    display: block; 
} 

.submenu 
{ 
    display:none; 
    position:relative; 
    background-color: blue; 
    white-space: nowrap; 
    min-width : 100%; 
    list-style-type: none; 
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4); 
} 

.submenu > li > a 
{ 
    text-align: left; 
    display:block; 
    color: #fff; 
    padding:16px 16px 12px 26px; 
    border-bottom:4px solid transparent; /*To offset white underline hover*/ 
    font-weight: 500; 
} 

.submenu > li:hover > a 
{ 
    background-color: green; 
    color: #FFDB00; 
    border-bottom: 4px solid #F1F227; 
    transition: 1s ease-out; 
} 

/*Child Sub Menu*/ 
.menu > ul > li > ul > li:hover > ul 
{ 
    display: block; 
} 

.subSubmenu 
{ 
    display:none; 
    position:relative; 
    background-color: blue; 
    white-space: nowrap; 
    min-width: 100%; 
    list-style-type: none; 
    bottom: 100%; 
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4); 
} 

.subSubmenu > li > a 
{ 
    text-align: left; 
    display:block; 
    color: #fff; 
    padding:19px 16px 12px 36px; 
    border-bottom:4px solid transparent; /*To offset white underline hover*/ 
    font-weight: 300; 
} 

.menu > ul > li > ul > li:hover > ul > li:hover > a 
{ 
    background-color: green; 
    color: #C5EFF7; 
    border-bottom: 4px solid #F1F227; 
    transition: 1s ease-out; 
} 

    /*set up the right arrows first*/ 
    .menu li > a:after { content: ' \25B6'; } 

    /*set up the downward arrow for top level items*/ 
    .menu > ul > li > a:after {content: ' \25BC'; } 

    /*clear the content if a is only child*/ 
    .menu li > a:only-child:after {content: ''; } 

/*Dimmer to dim background and no scolling when Hamburger menu is shown*/ 
.dimmer { 
    z-index: 0; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    background-color: rgba(0, 0, 0, 0.7); 
    display: none; 
} 

.dimmer.active 
{ 
    display: block; 
} 

.no-scrolling 
{ 
    overflow: hidden; 
    position: fixed; 
} 

HTML：

<div id="container"> 
<div class="nav"> 
<div class ="navWrapper"> 
<nav role="navigation" class="menu"> 
    <div class="hamburgerWrapper"> 
     <ul class="hamburger"> 
    <li><a id="toggle-nav" href="#"><span></span></a></li> 
     </ul> 
    </div> 
    <ul class="navList"> 
     <li><a href="#">Menu 1</a></li> 
     <li><a href="#">Menu 2</a></li> 
     <li> 
     <a href="MainPage.aspx">Menu 3</a> 
      <ul class="submenu"> 
       <li><a href="#">Sub 1</a></li> 
       <li><a href="#">Sub 2</a></li> 
      </ul> 
     </li> 
     <li> 
     <a href="#">Menu 4</a> 
      <ul class="submenu"> 
       <li><a href="#">Sub 3</a></li> 
       <li><a href="#">Sub 4</a></li> 
      </ul> 
     </li> 
    </ul> 
    <div class="hamburgerWrapper"> 
      <div class="toggle-nav"><a href="#">Menu</a></div> 
    </div> 
</nav> 
</div> 
</div> 
</div> 

<div class="dimmer"></div> 

<div class="main"> 
<main role ="main" class="mainWrapper"> 
</main> 
</div> 

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script> 
<script src="../Javascript/JavaScript.js"></script> 

Answer 1

我設法通過應用無滾動元素和jQuery的身體得到這個工作和不是主要的。我不太清楚爲什麼它不能對付Main，但它現在可以按預期工作。是我改變了代碼的部分如下：

CSS：

body.no-scrolling 
{ 
overflow: hidden; 
} 

JQuery的：

//No Scrolling 
    jQuery('body').toggleClass('no-scrolling');