菜单关闭画布错误移动

Question

我不知道这是否真的是一个错误，但是发生的事情是：我在移动设备中并激活我的offcanvas菜单，如果我向下滚动到页面底部，则菜单被剪切，当滚动完成时，他将恢复正常，我认为这是因为我使用的是固定位置，是要在手机上打印一张照片。我的测试服务器是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 screen and (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 screen and (max-width: 1021px) .off-canvas CSS类中，将height:100%;更改height:100%; 达到height:100vh; 。 并确保添加padding-bottom: 50px; 。

有关方案1和2的详细信息，答案：vw和vh是视口单位。 他们考虑了设备的全屏尺寸，而没有任何影响其的元素或属性。 例如，100％的单位只能使用其设置的元素内的空间，因为100vh或100vw分别是加载页面的设备的全屏高度或宽度。

情况3：您希望将宽度和高度保留为默认值，即当菜单打开时向下滚动时，将显示顶部灰色菜单层，该菜单层将背景色切换为透明并基于顶部滚动返回。菜单未打开。

您需要在脚本文件中的函数trocaNav(navbar, imgtoggle, topo, posicao, itensmenu)中进行更改，以仅在打开菜单的情况下才能将topo div的背景颜色从透明更改为灰色。 检查菜单是否打开的示例逻辑，您可以将条件置于off-canvas左边缘。 如果左侧为0，则打开菜单；如果左侧为-300px或未定义，则关闭菜单。

希望这可以帮助。