Question

我一直在寻找解决方案，但尚未找到解决方案。

我有一个带有粘贴标题/导航的网站，其中有一个汉堡按钮可以打开画布菜单。 off-canvas-wrapper包装所有内容，包括标题。标题导航工作正常，但是当您打开画布菜单时，标题会消失。最重要的是，如果您向下滚动页面，则不会在非画布菜单中看到菜单项 - 您必须向上滚动。

有人在网上建议将标题/导航从off-canvas-wrapper-inner中取出，这样可以防止栏条消失，但是你无法点击菜单栏来关闭画布菜单。

还有其他人找到了解决方法吗？

Answer 1

我有一个解决方案：

将粘性/固定的div移动到“超出画布的内容”之外。

<div class="off-canvas-wrapper">
 <div class="off-canvas position-left" data-off-canvas id="offCanvasL">
   <!-- LEFT MENU -->
 </div>
 <div class="off-canvas position-right" data-off-canvas id="offCanvasR">
   <!-- RIGHT MENU -->
 </div>
 <div class="fixed_div">
   <div class="menu_left" data-toggle="offCanvasL"><!-- OPEN LEFT MENU  --></div>
   <div class="menu_right" data-toggle="offCanvasR"><!-- OPEN RIGHT MENU --></div>
 </div>
 <div class="off-canvas-content" data-off-canvas-content>
  <!-- YOUR CONTENT-->
 </div>
</div>

然后我们需要一些 CSS 规则：

.fixed_div {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  transform: none;
  transition: transform .5s ease;
  backface-visibility: hidden;
}

.fixed_div.is-open-right.has-transition-push {
    transform: translateX(-250px);
}

.fixed_div.is-open-left.has-transition-push {
    transform: translateX(250px);
}

最后认为我们需要做的是在我们的 app.js 中添加一些 JQUERY ：

$('.menu_left').click(function() {
    $('.fixed_div').toggleClass('is-open-right has-transition-push has-position-right');
});
$('.menu_right').click(function() {
    $('.fixed_div').toggleClass('is-open-left has-transition-push has-position-left');
});
$('.close-button, .js-off-canvas-overlay').click(function() {
    $('.fixed_div').removeClass('is-open-right is-open-left has-transition-push has-position-right has-position-left');
});

仅此而已：）

Zurb Foundation 6粘头和offcanvas菜单

1 个答案: