时间戳

首页 > 解决方案 > 使用 Javascript 切换 CSS - 禁用汉堡菜单后面的滚动

javascript - 使用 Javascript 切换 CSS - 禁用汉堡菜单后面的滚动

问题描述

下面是我用来创建网站的 HTML 和 CSS。我以前没有使用 Javascript 的经验，所以我不熟悉如何使用它，但希望能够使用 Javascript 来切换一些 CSS，以便在我的汉堡菜单打开时背景不会滚动。我被困住了，但如果有人有任何建议给我，我将不胜感激。

请忽略上面的 Javascript，因为这适用于我打算使用的搜索栏。

<!DOCTYPE html>
<html lang="en; jp;">

<body style="background-color: white;">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <div class="page-wrap">

    <div class="cp_cont">
      <input id="cp_toggle03" type="checkbox" />
      <div class="cp_mobilebar">
        <label for="cp_toggle03" class="cp_menuicon">
                <span></span>
                </label>
      </div>
      <label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
      <div id="body" class="noscroll"></div>

      <header class="cp_offcm03">

        <nav>
          <ul style="text-align: center; margin-left: 210px; overflow: hidden;">

            <li style="border-bottom: .05px solid lightgray;"><a href="#">ホーム&lt;/a></li>
            <li style="border-bottom: .05px solid lightgray;"><a href="#">ブログ&lt;/a></li>
            <li style="border-bottom: .05px solid lightgray;"><a href="#">小泉ついて&lt;/a></li>
            <li style="border-bottom: .05px solid lightgray;"><a href="#">参考文献&lt;/a></li>


            <div class="searchbar">

              <form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;" />
              <input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;" />
              <input class="search1" type="submit" name="submition" value="検索" style=" padding-  
            bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;" />
              <input class="search2" type="hidden" name="sitesearch" value="default.html" />


              <script type="text/javascript">
                document.getElementById('frmSearch').onsubmit = function() {
                  window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
                  return false;
                }
              </script>

            </div>
          </ul>
        </nav>
      </header>


      <div class="setsumei">

        <br>
        <h1 style="text-align: center; font-size: 40px;">東京都&lt;/h1>
        <br>
        <p style="text-align: justify; font-size: 16px;">

          #

        </p>

      </div>

      <br>
      <div class="image">

        <a href="#"><img src="#" alt="#" width="85%"></a>
        <a href="#"><img src="#" alt="#" width="85%"></a>
        <a href="#"><img src="#" alt="#" width="85%"></a>
        <a href="#"><img src="#" alt="#" width="85%"></a>



      </div>
    </div>

    <br><br>
    <footer class="site-footer" style="font-size: 12px;"> | <a href="#">English</a></footer>

  </div>

  <style>
      .searchbar {
      float: right;
    }
    
    .image {
      text-align: center;
    }
    
    .setsumei {
      margin-left: 20px;
      margin-right: 20px;
    }
    
    .footer {
      width: 100%;
      height: 40px;
      text-align: center;
      border-top: 1px solid black;
      position: absolute;
      bottom: 0;
      padding: 10px;
    }
    
    .page-wrap {
      min-height: 100%;
      /* equal to footer height */
      margin-bottom: -40px;
    }
    
    .page-wrap:after {
      content: "";
      display: block;
    }
    
    .site-footer,
    .page-wrap:after {
      /* .push must be the same height as footer */
      height: 40px;
    }
    
    .site-footer {
      text-align: center;
      border-top: 1px solid black;
      padding: 10px;
    }
    
    *,
    *:before,
    *:after {
      padding-left: 0;
      `enter code here` margin: 0;
      box-sizing: border-box;
    }
    
    ol,
    ul {
      list-style: none;
    }
    
    a {
      text-decoration: none;
      color: black;
    }
    
    .cp_cont {
      height: auto;
    }
    /* menu */
    
    .cp_offcm03 {
      position: relative;
      z-index: 5000;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: auto;
      width: 100%;
      height: auto;
      padding-top: 0;
      -webkit-transition: transform 0.3s ease-in;
      transition: transform 0.3s ease-in;
      text-align: center;
      color: black;
      background-color: white;
    }
    
    .cp_offcm03 nav,
    .cp_offcm03 ul {
      height: 100%;
    }
    
    .cp_offcm03 li {
      display: inline-block;
      margin-right: -6px;
    }
    
    .cp_offcm03 a {
      display: block;
      padding: 15px 45px;
      margin-bottom: -5px;
      -webkit-transition: background-color .3s ease-in;
      transition: background-color .3s ease-in;
    }
    
    .cp_offcm03 a:hover {
      background-color: lightgray;
    }
    /* menu toggle */
    
    #cp_toggle03 {
      display: none;
    }
    
    #cp_toggle03:checked~.cp_offcm03 {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    
    #cp_toggle03:checked~.cp_container {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    
    .cp_mobilebar {
      display: none;
    }
    /* content */
    
    .cp_container {
      position: relative;
      top: 0;
      padding: 35px auto;
      -webkit-transition: transform .3s ease-in;
      transition: transform .3s ease-in;
    }
    
    .cp_content {
      margin: 0 auto;
      padding: 20px;
      height: 65vh;
      text-align: center;
    }
    
    @media (max-width: 1050px)and (min-width: 480px) {
      /* menu */
      .cp_offcm03 {
        position: fixed;
        left: -250px;
        overflow-y: hidden;
        width: 250px;
        height: 100%;
        padding-top: 40px;
        color: black;
        background-color: white;
        z-index: 1000;
      }
      .cp_offcm03 nav {
        background: white;
        border-right: 0.5px solid lightgray;
        margin-left: -210px;
      }
      .cp_offcm03 li {
        display: block;
        margin-right: 0;
      }
      .cp_offcm03 a {
        padding: 20px;
      }
      /* menu toggle */
      .cp_mobilebar {
        display: block;
        z-index: 2000;
        position: relative;
        top: 0;
        left: 0;
        padding: 0 25px;
        width: 100%;
        height: 40px;
        background-color: white;
        border-bottom: .05px solid lightgray;
      }
      .cp_menuicon {
        display: block;
        position: relative;
        width: 25px;
        height: 100%;
        cursor: pointer;
        -webkit-transition: transform .3s ease-in;
        transition: transform .3s ease-in;
      }
      .cp_menuicon>span {
        display: block;
        position: absolute;
        top: 55%;
        margin-top: -0.3em;
        width: 100%;
        height: 0.2em;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease;
        transition: transform .3s ease;
      }
      .cp_menuicon>span:before,
      .cp_menuicon>span:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease-in;
        transition: transform .3s ease-in;
      }
      .cp_menuicon>span:before {
        -webkit-transform: translateY(-0.6em);
        transform: translateY(-0.6em);
      }
      .cp_menuicon>span:after {
        -webkit-transform: translateY(0.6em);
        transform: translateY(0.6em);
      }
      #cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
      }
      #cp_toggle03:checked+.cp_mobilebar span:before,
      #cp_toggle03:checked+.cp_mobilebar span:after {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }
      #cp_toggle03:checked~.cp_offcm03 {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
      }
      #cp_toggle03:checked~.cp_container {
        -webkit-transform: translateX(250px);
        transform: translateX(250px);
      }
      input:checked~#h-menu_black {
        display: block;
        /*カバーを表示*/
        opacity: .6;
      }
      #h-menu_black {
        display: none;
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: .7s ease-in-out;
      }
      /* content */
      .cp_container {
        top: 60px;
        height: 92vh;
        text-align: center;
      }
      .noscroll {
        overflow: hidden;
        position: fixed;
      }
  </style>

</body>

</html>

标签： javascripthtmlcss

解决方案

在用于切换汉堡菜单的输入上添加 onchange 事件。


document.getElementById('cp_toggle03').onchange = function() {
  if (document.getElementById('cp_toggle03').checked) {
    document.body.style.overflow = "hidden";
  } else {
    document.body.style.overflow = "";
  }
}


document.getElementById('frmSearch').onsubmit = function() {
  window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
  return false;
}

document.getElementById('cp_toggle03').onchange = function() {
  if (document.getElementById('cp_toggle03').checked) {
    document.body.style.overflow = "hidden";
  } else {
    document.body.style.overflow = "";
  }
}
  .searchbar {
  float: right;
}

.image {
  text-align: center;
}

.setsumei {
  margin-left: 20px;
  margin-right: 20px;
}

.footer {
  width: 100%;
  height: 40px;
  text-align: center;
  border-top: 1px solid black;
  position: absolute;
  bottom: 0;
  padding: 10px;
}

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -40px;
}

.page-wrap:after {
  content: "";
  display: block;
}

.site-footer,
.page-wrap:after {
  /* .push must be the same height as footer */
  height: 40px;
}

.site-footer {
  text-align: center;
  border-top: 1px solid black;
  padding: 10px;
}

*,
*:before,
*:after {
  padding-left: 0;
  `enter code here` margin: 0;
  box-sizing: border-box;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

.cp_cont {
  height: auto;
}


/* menu */

.cp_offcm03 {
  position: relative;
  z-index: 5000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  width: 100%;
  height: auto;
  padding-top: 0;
  -webkit-transition: transform 0.3s ease-in;
  transition: transform 0.3s ease-in;
  text-align: center;
  color: black;
  background-color: white;
}

.cp_offcm03 nav,
.cp_offcm03 ul {
  height: 100%;
}

.cp_offcm03 li {
  display: inline-block;
  margin-right: -6px;
}

.cp_offcm03 a {
  display: block;
  padding: 15px 45px;
  margin-bottom: -5px;
  -webkit-transition: background-color .3s ease-in;
  transition: background-color .3s ease-in;
}

.cp_offcm03 a:hover {
  background-color: lightgray;
}


/* menu toggle */

#cp_toggle03 {
  display: none;
}

#cp_toggle03:checked~.cp_offcm03 {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

#cp_toggle03:checked~.cp_container {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.cp_mobilebar {
  display: none;
}


/* content */

.cp_container {
  position: relative;
  top: 0;
  padding: 35px auto;
  -webkit-transition: transform .3s ease-in;
  transition: transform .3s ease-in;
}

.cp_content {
  margin: 0 auto;
  padding: 20px;
  height: 65vh;
  text-align: center;
}

@media (max-width: 1050px)and (min-width: 480px) {
  /* menu */
  .cp_offcm03 {
    position: fixed;
    left: -250px;
    overflow-y: hidden;
    width: 250px;
    height: 100%;
    padding-top: 40px;
    color: black;
    background-color: white;
    z-index: 1000;
  }
  .cp_offcm03 nav {
    background: white;
    border-right: 0.5px solid lightgray;
    margin-left: -210px;
  }
  .cp_offcm03 li {
    display: block;
    margin-right: 0;
  }
  .cp_offcm03 a {
    padding: 20px;
  }
  /* menu toggle */
  .cp_mobilebar {
    display: block;
    z-index: 2000;
    position: relative;
    top: 0;
    left: 0;
    padding: 0 25px;
    width: 100%;
    height: 40px;
    background-color: white;
    border-bottom: .05px solid lightgray;
  }
  .cp_menuicon {
    display: block;
    position: relative;
    width: 25px;
    height: 100%;
    cursor: pointer;
    -webkit-transition: transform .3s ease-in;
    transition: transform .3s ease-in;
  }
  .cp_menuicon>span {
    display: block;
    position: absolute;
    top: 55%;
    margin-top: -0.3em;
    width: 100%;
    height: 0.2em;
    border-radius: 1px;
    background-color: black;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
  }
  .cp_menuicon>span:before,
  .cp_menuicon>span:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 1px;
    background-color: black;
    -webkit-transition: transform .3s ease-in;
    transition: transform .3s ease-in;
  }
  .cp_menuicon>span:before {
    -webkit-transform: translateY(-0.6em);
    transform: translateY(-0.6em);
  }
  .cp_menuicon>span:after {
    -webkit-transform: translateY(0.6em);
    transform: translateY(0.6em);
  }
  #cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cp_toggle03:checked+.cp_mobilebar span:before,
  #cp_toggle03:checked+.cp_mobilebar span:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  #cp_toggle03:checked~.cp_offcm03 {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  #cp_toggle03:checked~.cp_container {
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
  }
  input:checked~#h-menu_black {
    display: block;
    /*カバーを表示*/
    opacity: .6;
  }
  #h-menu_black {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .7s ease-in-out;
  }
  /* content */
  .cp_container {
    top: 60px;
    height: 92vh;
    text-align: center;
  }
  .noscroll {
    overflow: hidden;
    position: fixed;
  }
<body style="background-color: white;">

  <div class="page-wrap">

    <div class="cp_cont">
      <input id="cp_toggle03" type="checkbox" />
      <div class="cp_mobilebar">
        <label for="cp_toggle03" class="cp_menuicon">
            <span></span>
            </label>
      </div>
      <label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
      <div id="body" class="noscroll"></div>

      <header class="cp_offcm03">

        <nav>
          <ul style="text-align: center; margin-left: 210px; overflow: hidden;">

            <li style="border-bottom: .05px solid lightgray;"><a href="#">ホーム&lt;/a></li>
            <li style="border-bottom: .05px solid lightgray;"><a href="#">ブログ&lt;/a></li>
            <li style="border-bottom: .05px solid lightgray;"><a href="#">小泉ついて&lt;/a></li>
            <li style="border-bottom: .05px solid lightgray;"><a href="#">参考文献&lt;/a></li>


            <div class="searchbar">

              <form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;" />
              <input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;" />
              <input class="search1" type="submit" name="submition" value="検索" style=" padding-  
        bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;" />
              <input class="search2" type="hidden" name="sitesearch" value="default.html" />


            </div>
          </ul>
        </nav>
      </header>


      <div class="setsumei">

        <br>
        <h1 style="text-align: center; font-size: 40px;">東京都&lt;/h1>
        <br>
        <p style="text-align: justify; font-size: 16px;">

          #

        </p>

      </div>

      <br>
      <div class="image">

        <a href="#"><img src="#" alt="#" width="85%"></a>
        <a href="#"><img src="#" alt="#" width="85%"></a>
        <a href="#"><img src="#" alt="#" width="85%"></a>
        <a href="#"><img src="#" alt="#" width="85%"></a>



      </div>
    </div>

    <br><br>
    <footer class="site-footer" style="font-size: 12px;"> | <a href="#">English</a></footer>

  </div>

推荐阅读