JQuery調光器とスクロールが一緒に機能しない

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を適用することによって、この作業を取得するために管理し、メインではありません。私はあまりにもそれがメインに対して動作しない理由を過度に確信していませんが、それは今のところ意図どおりに動作します。私が変更されたコードの一部は次のとおりです。

CSS：

body.no-scrolling 
{ 
overflow: hidden; 
} 

はJQuery：

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