javascript - 菜单 OffScreen 的问题

Question

我有一个 Canvas 外菜单，他总是在屏幕上，但我的主 div 在他上面，所以，当我单击按钮时，主向右滑动然后你可以看到菜单，好吗？好的。但我有 3 个问题:

1. 当菜单被激活时，页面会自动滚动到顶部，但它应该只禁用滚动。
2. 当我关闭菜单时，我的主体不会滚动，即使我通过 Jquery 更改它也是如此
3. 菜单链接无效。

我试过使用 TranslateX()，但它没有显示菜单。我哪里错了？

我正在使用这个网站的菜单作为灵感，http://www.x-apps.com.br/那是我的网站https://tiagosilveiraa.github.io/

var menu = false;
$('#hamburguer').click(function() {
    if (menu === false) {
      mostraCanvas();
    } else {
      escondeCanvas();
    }
});

function escondeCanvas() {
    $("#main").css("padding-left", "0");
    $("html, body").css("overflow", "auto");

    menu = false;
}

function mostraCanvas() {
  $("#main").css("padding-left", "50vw");
  $("html, body").css("overflow", "hidden");
  menu = true;
}

$('.off-item').click(function() {
    escondeCanvas();
});

.off-canvas{
  padding-top: 10px;
  left: 0;
  background-color: #292929;
  height: 100vh;
  width: 50vw;
  position: fixed;
  text-align: left;
  overflow-y: hidden;
  overflow-x: hidden;
  z-index: -1;
}
#main{
  z-index: 9999;
  margin: 0 !important;
  transition: all .2s linear;
  -webkit-transition: padding .2s linear;
  -moz-transition: padding .2s linear;
  -o-transition: padding .2s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
      <div class="topo" id="topo">
      <button id="hamburguer"><h1><span class="glyphicon glyphicon-menu-hamburger blue btn-nav"></span></h1><button>
    </div>
      <nav class="navbar" id="navbar">
         <ul>
            <a href="#banner" id="linkbanner">
               <li class="nav-item">
                  <h2>Inicio</h2>
               </li>
            </a>
            <a href="#sobremim">
               <li class="nav-item">
                  <h2>Sobre Mim</h2>
               </li>
            </a>
            <a href="#portfolio">
               <li class="nav-item">
                  <h2>Portfólio</h2>
               </li>
            </a>
            <a href="#habilidades">
               <li class="nav-item">
                  <h2>Habilidades</h2>
               </li>
            </a>
            <a href="#contato">
               <li class="nav-item">
                  <h2>Contato</h2>
               </li>
            </a>
         </ul>
      </nav>
     ...body stuff here...  
  </div>

Answer 1

试试下面的代码。我重构了 html，因为标签不能在 ul 中。我也将 overflow 更改为 overflow-x 以避免滚动问题。希望对您有所帮助。

var menu = false;
$('#hamburguer').click(function() {
    if (menu === false) {
      mostraCanvas();
    } else {
      escondeCanvas();
    }
});

function escondeCanvas() {
    $("#main").css("padding-left", "0");
    $("body").css("overflow-x", "");

    menu = false;
}

function mostraCanvas() {
  $("#main").css("padding-left", "50vw");
  $("body").css("overflow-x", "hidden");
  menu = true;
}

$('.off-item').click(function() {
    escondeCanvas();
});

.off-canvas{
  padding-top: 10px;
  left: 0;
  background-color: #292929;
  height: 100vh;
  width: 50vw;
  position: fixed;
  text-align: left;
  overflow-y: hidden;
  overflow-x: hidden;
  z-index: -1;
}
#main{
  z-index: 9999;
  margin: 0 !important;
  transition: all .2s linear;
  -webkit-transition: padding .2s linear;
  -moz-transition: padding .2s linear;
  -o-transition: padding .2s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
      <div class="topo" id="topo">
      <button id="hamburguer"><h1><span class="glyphicon glyphicon-menu-hamburger blue btn-nav"></span></h1><button>
    </div>
      <nav class="navbar" id="navbar">
        <ul>
          <li class="nav-item">
            <a href="#banner" id="linkbanner">
              <h2>Inicio</h2>
            </a>
          </li>
          <li class="nav-item">
            <a href="#sobremim">
              <h2>Sobre Mim</h2>
            </a>
          </li>
          <li class="nav-item">
            <a href="#portfolio">
              <h2>Portfólio</h2>
            </a>
          </li>
          <li class="nav-item">
            <a href="#habilidades">
              <h2>Habilidades</h2>
            </a>
          </li>
          <li class="nav-item">
            <a href="#contato">
              <h2>Contato</h2>
            </a>
          </li>
        </ul>
      </nav>
     ...body stuff here...  
  </div>