javascript - 菜单关闭 Canvas 错误移动

Question

我不知道这是否真的是一个错误，但会发生什么: 我在移动设备上并激活我的 Canvas 菜单，如果我向下滚动到页面底部，菜单被剪切，当滚动完成时他恢复正常，我认为这是因为我使用的是固定位置，我是把我拍的照片放在手机上。我的测试服务器是 http://tiagotestes.esy.es/portfolio (PS:那里用的图不是我的，我只是用来测试的)我真的不知道怎么解决，看起来是渲染问题...

打印:

HTML:

<nav class="off-canvas" id="offcanvas">
         <ul class="itens">
            <a href="#banner" id="offlinkbanner">
               <li class="off-item">
                  <h2>Inicio</h2>
               </li>
            </a>
            <a href="#sobremim">
               <li class="off-item">
                  <h2>Sobre Mim</h2>
               </li>
            </a>
            <a href="#habilidades">
               <li class="off-item">
                  <h2>Habilidades</h2>
               </li>
            </a>
            <a href="#portfolio">
               <li class="off-item">
                  <h2>Portfólio</h2>
               </li>
            </a>
            <a href="#contato">
               <li class="off-item">
                  <h2>Contato</h2>
               </li>
            </a>
         </ul>
      </nav>

CSS:

.off-canvas{
  transition: all .4s linear;
  -webkit-transition: all .4s linear;
  -moz-transition: all .4s linear;
  -o-transition: all .4s linear;
  padding-top: 50px;
  left: -300px;
  background-color: #292929;
  height: 100%;
  width: 250px;
  position: fixed;
  text-align: left;
  z-index: 9;

}

创造奇迹的Js:

function mostraCanvas(offcanvas, toggle, expand) {
    offcanvas.css("left", "0");
   // expand.css("display", "inline");
   // toggle.css("display", "none");
}

Answer 1

如果我对您的理解正确的话，我认为您应该更改代码。

场景 1:

您希望 offcanvas 菜单在打开时覆盖整个屏幕宽度。为此，您需要进行以下更改。

在 @media only 屏幕和 (max-width: 1021px) .off-canvas CSS 类中:

1. 将 width:250px; 更改为 width:100vw;
2. 添加 min-width:250px;。
3. 将 height:100%; 更改为 height:100vh;

在scripts.js文件中，函数escondeCanvas(offcanvas, toggle, expand)，修改offcanvas.css("left", "-300px"); 到 offcanvas.css("left", "-100vw");

上述更改将使菜单覆盖整个屏幕的宽度和高度。

场景 2:

加载后第一次在移动设备中滚动时。菜单似乎转移到顶部并在底部留下一个空白区域，当滚动停止时空白区域被灰色背景填充。

我认为这是因为当您在任何网页上向上滚动时，地址栏在移动设备中消失了。在 @media only 屏幕和 (max-width: 1021px) .off-canvas CSS 类中，将 height:100%; 更改为 height:100vh;。为了确保，添加 padding-bottom: 50px;。

场景 1 和 2 答案的详细信息:vw 和 vh 是视口(viewport)单位。它们考虑了设备的全屏尺寸，没有任何元素或属性影响它。例如。 100% 单位只能使用它设置的元素内的空间，其中 100vh 或 100vw 分别是加载页面的设备的全屏高度或宽度。

场景 3: 您希望将宽度和高度保持为默认值，即但是当您在菜单打开的情况下向下滚动时，顶部灰色菜单层将背景颜色切换为透明并基于顶部滚动显示返回，这应该只在菜单不显示时显示打开。

您需要更改脚本文件中的函数 trocaNav(navbar, imgtoggle, topo, posicao, itensmenu) 以检查并将 topo div 的背景颜色从透明更改为仅灰色如果菜单打开。检查打开菜单的示例逻辑，您可以在 off-canvas 左边距上放置条件。如果 left 为 0 则菜单打开，如果 left 为 -300px 或 undefined 则菜单关闭。

希望这对您有所帮助。