JQuery Dimmer와 No Scrolling이 함께 작동하지 않습니다.

내 웹 사이트가 모바일보기에있을 때 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>