如何使用Javascript

Question

我正在尝试学习JavaScript，并且不知道还有什么地方可以转向。我使用HTML和CSS创建了一个移动导航，并试图在Mobile Nav打开时阻止正文滚动。

以下是该问题的快照：

我正在尝试创建一个javascript代码，因此当移动菜单处于活动状态时，身体滚动被隐藏，当它被隐藏时，身体滚动是正常的。我希望有人可以帮我创建一个if else脚本来实现这个功能。

这是编写的HTML和CSS代码：

＆＃13;

＆＃13;

.inner-menu {
   position: fixed!important;
   height: 300px!important;
   overflow: auto!important;
   background-color: #fff!important;
   z-index: -10!important;
 }

.mobile-menu label {
   font-family: Lora!important;
   font-style: Italic!important;
   font-weight:700!important;
   font-size: 18px!important;
}

nav-pbf { 
  margin: 0;
}

nav-pbf:after { 
  content: "";
  display: table;
  clear: both;
}

.toggle + a,
 .pbf-dropdown-content { 
  display: none; 
 }

.toggle {
  display: block;
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #d8d8d8!important;
  text-align:center!important;
}

.toggle:hover {}

[id^=drop]:checked + ul { display: block; }
 
nav-pbf ul li {
  display: block;
  width: 100%;
}

nav-pbf ul ul .toggle,
 nav-pbf ul ul a { padding: 0 40px; }
 
nav-pbf ul ul ul a { padding: 0 80px; }
 
nav-pbf a:hover,
 nav-pbf ul ul ul a { 
  background-color: #f8f8f8; 
 }

nav-pbf ul li ul li .toggle,

nav-pbf ul ul a { 
  background-color: #e8e8e8; 
  font-family: Lora!important
  font-style: Italic!important;
  font-size: 18px!important;
  font-weight: 500!important;
}

nav-pbf ul ul {
  float: none;
  position: static;
  color: #ffffff;
}

nav-pbf ul ul li:hover > ul,
nav-pbf ul li:hover > ul { display: none; }
nav-pbf ul ul li {
  display: block;
  width: 100%;
}
nav-pbf ul ul ul li { position: static;
}

.pbf-single-link {
   font-family: Lora!important;
   font-style: Italic!important;
   font-weight:700!important;
   font-size: 3vh!important;
   line-height: 60px!important;
   color: #000!important;
}

ul.inner-menu li {
  list-style: none !important;
  display: block;
  float: left;
  width: 100% !important;
}

ul.inner-menu{
  display: block;
  float: left;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.inner-sub {
  display: block;
  float: left;
  width: 100%;
}

ul.inner-menu li a {
  list-style: none !important;
  display: block;
  float: left;
  width: 100% !important;
  text-decoration: none !important;
  font-family: Lora;
  font-style: Italic;
  font-size: 16px;
  line-height: 38px;
  padding: 0px 1em;
  border-bottom: 1px solid #d8d8d8;
  border-right: 1px solid #d8d8d8;
  color: #3d3d3d;
}

.mobile-menu {
    float: none;
    width: 100%;
    padding: 0px;
    height: 10vh !Important;
    line-height: 10vh !Important;
}
.mobile-menu .tab {
  position: relative;
  color: #fff;
  overflow: hidden;
}
.mobile-menu input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.mobile-menu label {
    position: relative;
    display: block;
    padding: 0 0 0 1em;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 0px !Important;
    text-align: left;
    font-size: 3vh !Important;
    line-height: 10vh !Important;
  text-align: right;
}
.mobile-menu .tab-content {
  max-height: 0;
  overflow: hidden;
  background: #fff;
  -webkit-transition: max-height .2s;
  -o-transition: max-height .2s;
  transition: max-height .2s;
}

.mobile-menu .tab-content p {
  margin: 1em;
}
/* :checked */

.mobile-menu input:checked ~ .tab-content {
    max-height: none;
    transition: max-height .2s;
    position: fixed;
    z-index: 9999999 !Important;
    width: 100% !important;
    left: 0px;
    top: 16vh;
}
@media (max-width: 1024px) {
  
  .faq-accordion label {
    padding: 4% 12% 4% 5%;
    font-size: 14px !important;
    line-height: 20px !important;
}
#header .header-top .menu-top {
    display: none !Important;
}
  .main-content {
    display: block;
    float: left;
    width: 100%;
}
  
  .template-collection div#secondary {
    display: none;
}
  .breadcrumb {
    margin-top: 0px !important;
  }
   .grid__item {
    width: 90% !important;
    margin-left: 5%;
  }
  .mobile-menu {
    display: inline-block !important;
  }
  
    
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }
  
  #topbar .voucher {
    display: none !important;
  }
  
  div#topbar .container {
    width: 100% !Important;
    padding: 0% 0% !Important;
}
  .newsletter .text {
    display: block;
    float: left;
    width: 100% !Important;
}
  
  .newsletter .text h3 {
    display: block;
    float: left;
    width: 100% !Important;
    font-size: 32px !important;
    line-height: 33px !important;
    padding-top: 15px;
}
  
  #topbar .accounts-section {
    display: block;
    float: left !important;
    width: 50% !Important;
    height: 6vh !Important;
    border-right: 1px solid #0b3254;
    text-align: center !Important;

}
  
  #topbar .topbar-left {
    width: 70%;
    margin-right: 0px !Important;
}
  
  
  #topbar {
    height: auto !Important;
    display: block;
    width: 100%;
}
  
  .icon-menu-mobile {
    display: inline-block !important;
  }
  
  .icon-menu-mobile.active > .navbar-nav {
    display: block !Important;
  }
  
  .ordering span.col {
    display: none;
}

form.order-by {
    display: block;
    float: right;
    margin-top: 0px !important;
}
  .ordering {
    margin-top:0px !important;
  }
  
  .products.grid_full .item-inner, .products.grid_full.grid_sidebar .item-inner {
    width: 50%;
}
  
.ordering p.result-count {
    display: block;
    float: right;
    width: 100%;
    margin-top: 5%;
}

.ordering span.list {
    display: block;
    float: left;
    height: 36px;
    width: 36px;
}
  
  input.btn.link-button.wpcf7-form-control.wpcf7-submit {
    background-color: #aac02c;
    width: 100%;
    color: #fff;
}
  .icons-menu {
    display: none !Important;
  }
  
  form#AddToCartForm .quantity input {
    width: 100%;
}
  
  .breadcrumb {
    padding: 0% 5%;
  }
  
  .grid__item.large--three-quarters h1, .grid__item.large--three-quarters h2 {
    font-size: 16px;
    text-align: center;
    line-height: 20px;
    margin-bottom: 12px;
}
  div#googleMap {
    display: none;
}
  .template-product .hoz-tab-container {
    margin-bottom: 0px !important;
}
  
  #header {
    background-color: #021c33 !important;
  }
  .product-details-content .product-img-box #image-view {
    display: block;
    float: left;
    width: 75%;
}
  
  span.type h4 {
    text-align: center;
}
  
  .product-img-box {
    display: block;
    float: left;
    width: 100%;
    margin-bottom: 0px !important;
}
  
  .template-product .breadcrumb {
    display: none !important;
  }


.product-details-content .product-thumb {
    display: block;
    float: left;
    width: 25%;
}

.product-details-content ul.thumb-content {
    display: block;
    float: left;
    width: 100%;
    margin-top: 0px !Important;
}

.product-details-content .product-img-box .thumb-content li {
    display: block;
    float: left;
    width: 100%;
    padding-right: 0px;
    margin-bottom: 0px;
}
  
  header#header .container {
    width: 100% !Important;
    background-color: #0b3254 !important;
        padding-top: 0vh;
    padding-bottom: 0vh;
    border-top: 1px solid #011b31;
}

  
  #header .header-top .search {
    margin-right: 0px;
    position: relative;
}
#header .header-top .search .search-form {
    position: relative;
    height: 8vh;
    padding: 0px !important;
  display: block;
  float: left;
  border: 0px !Important;
  width: 85% !important;
}
  
  #header .header-top .search .search-form input {
    height: 8vh;
    border-top: 0px !Important;
    border-left: 0px !Important;
    border-right: 0px !Important;
    border-bottom: 1px solid #eaeaea !Important;
  }
  
  #header .header-top .search i.fa {
    color: #ffffff !important;
    line-height: 8.6vh;
    float: right;
    background-color: #aac02c;
    width: 15%;
    margin: 0px !Important;
}
  .newsletter form {
    max-width: 100% !important;
    width: 100% !important;
  }
  .container {
    width: 100% !important;
}
  
  .slider-product .tabs {
    display: none !Important;
}
  
  .slider-product.featured-product {
    margin-left: 0px !important;
}
   
 .owl-carousel.owl-loaded {
    width: 100% !Important;
 }
  
  div#home-grid {
    display: inline-block;
    width: 100vw !important;
    margin: 0vw !Important;
}
  
  .col {
    width: 100vw !important;
    height: 100% !important;
}
  
.row-1 {
    width: 100vw !Important;
    display: block;
    float: left;
    height: auto !important;
}
  
  div#home-grid .overlay-box {
    height: 60vw !important;
  }
  
  div#home-grid .col-40 {
    display: none !important;
  }
  div#newsletter-with-blog .recent-blogs {
    display: none !Important;
}
  
  .newsletter-signup {
    width: 100% !important;
}
  
  .newsletter-signup .newsletter .text h3 {
    font-size: 20px !Important;
  }
  
  .newsletter-signup .newsletter h3 strong {
    display: block;
    font-size: 44px;
    line-height: 48px;
}
  
  img.footer-logo {
    width: 100% !Important;
  }
  
  .row.footer-top {
    text-align: center !Important;
}
  
  #footer ul {
    width: 100% !Important;
  }
  
  div#home-grid .overlay-box h1 {
    font-size: 7.5vw !important;
    line-height: 7.5vw !important;
  }
  
  div#home-grid .overlay-box a {
    color: #fff;
    display: inline-block;
    width: 60%  !important;
    font-size: 4.5vw !important;
    line-height: 10vw !important;
    border: 1px solid #fff;
    margin-top: 4%;
    border-radius: 5px;
}
  
  .mega-menu {
   display: none !important;
  }
  


.slidershow-container {
  margin-bottom: 0px !important;
}
  
  .inner.section-products-tabs-v3 {
    padding: 5vh 2% 0px 2%;
}
  
  .title-text.title-text-v2.title-text-v3 h3 {
    font-size: 22px;
    letter-spacing: 1px;
    line-height: 24px;

}
  
  .inner.section-products-tabs-v3 {
    padding: 3vh 0px 0px 0px !important;
  }
  .inner.section-products-tabs-v3 .container {
    padding: 0px !important;
  }
  
  .inner.section-products-tabs-v3 .slider-product.slider-product-home4.featured-product.space-100 {
    padding-top: 0px !important;
  }
  
  .owl-next, .owl-prev {
    font-size: 12px;
    line-height: 45px;
}
  
  .inner.section-products-tabs-v3 .item-inner {
    padding: 1% 10% 0% 10%;
}
  .tab-container .owl-carousel .owl-item {
    padding: 0px !Important;
}
  
   .product-details-content .product-name h1 {
    font-size: 20px;
     text-align: center;
}
  
  .wrap-price {
    padding: 0px !important;
    border-bottom: 0px !important;
}
  
  .wrap-price h3.price {
    font-size: 24px !important;
  }
  
 .product-details-content .quantity.space-30 {
    width: 30% !Important;
    display: block;
    float: left !important;
    margin-right: 5% !important;
}
  
form#AddToCartForm .products {
    display: block;
    float: right !Important;
}
  
 form#AddToCartForm .quantity input {
    height: 38px;
    border: 1px solid #b7b7b7;
}
  
  div#topbar {
    background-image: none !important;
    display: block;
    height: 6vh !important;
}

.topbar-left {
    width: 70% !important;
    height: 6vh !important;

}

.topbar-right {
    min-width: 30% !important;
  height: 6vh !important;
    display: inline-block;
}


  
.multisite .tab img {
    height: 6vh !important;
    display: inline-block;
}
  
  .mini-cart-section {
    display: block;
    float: right !important;
    margin-right: 0px;
    width: 50% !Important;
    text-align: center !Important;
}
  
 #topbar .topbar-right .sign-in {
    border-left: 0px !Important;
    padding: 0px !Important;
    display: inline-block !IMportant;
   float: none !Important;
}
  
  .multisite .tab {
    display: inline-block;
    width: 50%;
    float: left;
    background-color: #fff !important;
    border-radius: 0px !Important;
    overflow: hidden;
    height: 6vh !Important;
    text-align: center !Important;
    margin: 0px !Important;
    border-right: 1px solid #9d9d9d;
}
  
  .multisite {
    display: inline-block !important;
    width: 100%;
    height: 6vh !important;
    margin-top: 0vh !important;
}

.tab.unactive:hover {
  margin-right: 0px !important;
}



  .item-inner {
    text-align: center !IMportant;
}
  
  .products .product .action {
  display: none !important;
}
  
  .slider-product-home4 .item-inner .product .add-to-cart {
    background-color: #0b3254 !Important;
    border: 1px solid #0b3254 !Important;
    color: #fff !IMportant;
}
  span.account-icon img {
    height: 3vh !important;
    line-height: 6vh !important;
  }
  
  span.account-icon {
    height: 6vh !important;
    line-height: 6vh !Important;
}
  
  a.icon-cart {
    line-height: 7vh !important;
    height: 6vh !Important;
}
  #header .header-top .search.search.dropdown {
    line-height: 8vh !important;
    width: 100%;
  }
  
  .mini-cart-section i.fa.fa-shopping-cart {
    margin-right: -8px !Important;
  }
  footer#footer .container {
    width: 80% !important;
    max-width: 80% !important;
  }
  
  input.btn.btn-dark-b {
    display: block;
    width: 100% !Important;
    background-color: #a3c07e !Important;
}

p.form-link {
    text-align: center !Important;
}
  
  #header .header-top .col-md-10 {
    width: 70% !Important;
}
  
  #header .col-md-2.col-sm-3.col-xs-12 {
    width: 25%;
    padding: 0px !important;
}
  .container.press img {
    display: block;
    float: left;
    width: 46%;
    border: 1px solid #eaeaea;
    margin: 2%;
}
}

＆＃13;

<div class="mobile-menu">
    <div class="tab">
      <input id="tab-one" type="checkbox" name="tabs">
      <label for="tab-one"><i class="fa fa-bars"></i></label>
      <div class="tab-content">
        <div class="inner-sub"> 
         <nav-pbf>
          <ul class="inner-menu">
            <!-- pbf Drop 1 -->
    <li>
      <label class="toggle" for="drop-1"> Collections <span class="caret"></span> </label>
      <input type="checkbox" id="drop-1"/>
       <ul class="pbf-dropdown-content">
            <li><a href="/collections/all">All Collections</a></li>
            <li><a href="/collections/hayden">Hayden</a></li>
            <li><a href="/collections/penelope">Penelope</a></li>
            <li><a href="/collections/bennet">Bennet</a></li>
         	<li><a href="/collections/piper">Piper</a></li>
       	    <li><a href="/collections/sketched-hearts-1">Sketched Hearts</a></li>
         	<li><a href="/collections/paper-swans">Paper Swans</a></li>
            <li><a href="/collections/elephant-parade">Elephant Parade</a></li>
         	<li><a href="/collections/little-crowns">Little Crowns</a></li>
         	<li><a href="/collections/my-first-alphabet-1">My First Alphabet</a></li>
         	<li><a href="/collections/organix">Organix</a></li>
      </ul>
            </li>
            <!-- pbf Drop 2 -->
    <li>
      <label class="toggle" for="drop-2"> Essentials <span class="caret"></span> </label>
      <input type="checkbox" id="drop-2"/>
       <ul class="pbf-dropdown-content">
            <li>
              <label class="toggle" for="drop-3"> Blankets <span class="caret"></span> </label>
                <input type="checkbox" id="drop-3"/>
              <ul class="pbf-dropdown-content">
                <li><a href="/collections/living-textiles-blankets">All Blankets</a></li>
                <li><a href="/collections/living-textiles-blankets-boys">Boys</a></li>
                <li><a href="/collections/living-textiles-blankets-girls">Girls</a></li>
                <li><a href="/collections/living-textiles-blankets-neutral">Neutral</a></li>
              </ul>
              </li>
            <li>
              <label class="toggle" for="drop-4"> Comforters <span class="caret"></span> </label>
                <input type="checkbox" id="drop-4"/>
              <ul class="pbf-dropdown-content">
                <li><a href="/collections/comforters">All Comforters</a></li>
                <li><a href="/collections/comforters-boys">Boys</a></li>
                <li><a href="/collections/comforters-girls">Girls</a></li>
                <li><a href="/collections/comforters-neutral">Neutral</a></li>
              </ul>
         </li>
            <li>
              <label class="toggle" for="drop-5"> Bath <span class="caret"></span> </label>
                <input type="checkbox" id="drop-5"/>
              <ul class="pbf-dropdown-content">
                <li><a href="/collections/living-textiles-essentials-bath">All Bath</a></li>
                <li><a href="/collections/living-textiles-essentials-bath-washcloths">Washclothes</a></li>
                <li><a href="/collections/living-textiles-bath-mittens">Bath Mittens</a></li>
              </ul>         
         </li>
            <li>
              <label class="toggle" for="drop-6"> Accessories <span class="caret"></span> </label>
                <input type="checkbox" id="drop-6"/>
              <ul class="pbf-dropdown-content">
                <li><a href="/collections/living-textiles-accessories-blankies">Blankies</a></li>
                <li><a href="/collections/bumpers">Bumpers</a></li>
                <li><a href="/collections/change-pad-covers">Change Pad Covers</a></li>
                <li><a href="/collections/crib-railing">Crib Railing</a></li>
                <li><a href="/collections/mobile">Mobile</a></li>
                <li><a href="/collections/plush">Plush</a></li>
              </ul>            
         </li>
            <li>
              <label class="toggle" for="drop-7"> Other <span class="caret"></span> </label>
                <input type="checkbox" id="drop-7"/>
              <ul class="pbf-dropdown-content">
                <li><a href="/collections/clothing">Clothing</a></li>
                <li><a href="/collections/smart-dri">Smart Dri Protectors</a></li>
              </ul>            
         </li>
      </ul>
            </li>
            <!-- pbf Drop 3 -->
    <li>
      <label class="toggle" for="drop-8"> Bedding <span class="caret"></span> </label>
      <input type="checkbox" id="drop-8"/>
       <ul class="pbf-dropdown-content">
            <li>
              <label class="toggle" for="drop-9"> Baby Bedding <span class="caret"></span> </label>
                <input type="checkbox" id="drop-9"/>
              <ul class="pbf-dropdown-content">
                <li><a href="/collections/baby-bedding">All Bedding</a></li>
                <li><a href="/collections/girls-nursery-bedding">Girls</a></li>
                <li><a href="/collections/boys-nursery-bedding">Boys</a></li>
                <li><a href="/collections/baby-bedding-neutral">Neutral</a></li>
                <li><a href="/collections/comforters">Comforters</a></li>
              </ul>              
         </li>
            <li>
              <label class="toggle" for="drop-10"> Sheeting <span class="caret"></span> </label>
                <input type="checkbox" id="drop-10"/>
              <ul class="pbf-dropdown-content">
                <li><a href="/collections/living-textiles-sheeting">All Sheeting</a></li>
                <li><a href="/collections/living-textiles-sheeting-girls">Girls</a></li>
                <li><a href="/collections/living-textiles-sheeting-boys">Boys</a></li>
                <li><a href="/collections/living-textiles-sheeting-neutral">Neutral</a></li>
                <li><a href="/collections/living-textiles-bed-skirts">Bed Skirts</a></li>
                <li><a href="/collections/living-textiles-pillows">Pillows</a></li>
              </ul>                  
         </li>
            <li>
              <label class="toggle" for="drop-11"> Blankets <span class="caret"></span> </label>
                <input type="checkbox" id="drop-11"/>
              <ul class="pbf-dropdown-content">
                <li><a href="/collections/living-textiles-blankets">All Blankets</a></li>
                <li><a href="/collections/living-textiles-blankets-boys">Boys</a></li>
                <li><a href="/collections/living-textiles-blankets-girls">Girls</a></li>
                <li><a href="/collections/living-textiles-blankets-neutral">Neutral</a></li>
              </ul>   
         </li>
            <li>
              <label class="toggle" for="drop-12"> Essentials <span class="caret"></span> </label>
                <input type="checkbox" id="drop-12"/>
              <ul class="pbf-dropdown-content">
                <li><a href="/collections/smart-dri">Smart Dri Covers</a></li>
              </ul>                 
         </li>
      </ul>
            </li>
            <!-- pbf Drop 4 -->
    <li>
      <label class="toggle" for="drop-13"> Gifts <span class="caret"></span> </label>
      <input type="checkbox" id="drop-13"/>
       <ul class="pbf-dropdown-content">
            <li>
              <label class="toggle" for="drop-14"> Gifts For <span class="caret"></span> </label>
                <input type="checkbox" id="drop-14"/>
              <ul class="pbf-dropdown-content">
                <li><a href="/collections/living-textiles-gifts-girls">Girls</a></li>
                <li><a href="/collections/living-textiles-gifts-boys">Boys</a></li>
                <li><a href="/collections/living-textiles-gifts-neutral">Neutral</a></li>
              </ul>                  
         </li>
            <li>
              <label class="toggle" for="drop-15"> Gifts By Price <span class="caret"></span> </label>
                <input type="checkbox" id="drop-15"/>
              <ul class="pbf-dropdown-content">
                <li><a href="/collections/living-textiles-gifts-under-25">Under $25</a></li>
                <li><a href="/collections/living-textiles-gifts-50-and-under">Under $50</a></li>
                <li><a href="/collections/living-textiles-gifts-150-and-under">Under $150</a></li>
              </ul>   
         </li>
            <li>
              <label class="toggle" for="drop-16"> Gifts By Category <span class="caret"></span> </label>
                <input type="checkbox" id="drop-16"/>
              <ul class="pbf-dropdown-content">
                <li><a href="/collections/baby-bedding">Bedding</a></li>
                <li><a href="/collections/living-textiles-essentials">Essentials</a></li>
                <li><a href="/collections/living-textiles-gift-plush">Decor</a></li>
                <li><a href="/collections/living-textiles-gift-wearable-blankets">Wearable Blankets</a></li>
              </ul>                 
         </li>
      </ul>
            </li>
            <!-- pbf Drop 5 -->
    <li>
      <a class="pbf-single-link" href="/collections/living-textiles-sale"> Sales </a>
      <!-- Uncomment for Dropdown <input type="checkbox" id="drop-6"/>
       <ul class="pbf-dropdown-content">
      </ul> -->
            </li>
           </ul>
            </nav-pbf>
      </div>
    </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;