1

我一直在互联网上寻找解决方案，但还没有找到。

我有一个带有粘性标题/导航的网站，它有一个汉堡包按钮来打开一个画布菜单。off-canvas-wrapper 包装了所有内容，包括标题。标题导航有效，但是当您打开关闭画布菜单时，标题会消失。最重要的是，如果您向下滚动页面，您不会在画布菜单中看到菜单项 - 您必须向上滚动。

网上有人建议把header/nav从off-canvas-wrapper-inner中取出来，这样可以防止bar消失，但是无法点击菜单栏关闭off-canvas菜单。

有没有其他人找到解决这个问题的方法？

4

1 回答 1

0

我有一个解决方案：

将粘性/固定 div 移到“off-canvas-content”之外。

<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');
});

这就是全部:)

于 2019-05-04T13:03:49.683 回答