菜单OffScreen出现问题

Question

我有一个非画布菜单，他总是在屏幕上，但我的主要部分在他上方，só，当我点击按钮，主要向右滑动然后你可以看到菜单，好吗？好。但我有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-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>