CSS

Question

我有一个页面，我在其中设置了 div 以在滚动时产生视差效果。这是 fiddle.

我在 canvas 菜单中添加基础时遇到问题，我无法再向下滚动。我怎样才能解决这个问题并能够与关闭 canvas 菜单具有相同的滚动效果？

这是 html 添加了 Foundations canvas:

<body>
  <div class="off-canvas-wrapper">
      <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
        <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

          <!-- Close button -->
          <button class="close-button" aria-label="Close menu" type="button" data-close>
            <span aria-hidden="true">&times;</span>
          </button>

          <!-- Menu -->
          <ul class="vertical menu">
            <li><a href="#">Foundation</a></li>
            <li><a href="#">Dot</a></li>
            <li><a href="#">ZURB</a></li>
            <li><a href="#">Com</a></li>
            <li><a href="#">Slash</a></li>
            <li><a href="#">Sites</a></li>
          </ul>

        </div>

        <div class="off-canvas-content" data-off-canvas-content>
          <div id="app">
             <div id="bg">
          </div>
          <div class="panel panel-one">
            <div class="panel-inner">
              <div class="content">
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p>
             </div>
           </div>
         </div>

         <div class="panel panel-two">
           <div class="panel-inner">
            <h2>Lorem ipsum dolor sit amet</h2>
            <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p>
           </div>
        </div>
      </div>
    </div>
  </div>
</div>

已更新

我测试了如果我为 content class 删除 position: fixed;，那么我可以向下滚动，但我需要以某种方式保持内容固定，这样它就不会移动滚动时，如何通过关闭-canvas?

功能实现

我设法通过覆盖基础 classes 使其半工作，但它一点也不流畅，现在我可以滚动整个页面内容，但是 off-canvas 在打开时不固定，我尝试通过设置 off-canvas-left 和 position:fixed 但这没有用：

.off-canvas-wrapper {
  height: auto;
  position: static;
  overflow: scroll;
}

.off-canvas-wrapper-inner {
  height: auto;
}

.off-canvas {
  position: fixed;
}

Answer 1

我修改了您提供的代码并添加了一个关闭 canvas 菜单。我希望这是你需要的。

https://jsfiddle.net/ToddNewent/beqswr69/58/

HTML

<body>

  <!-- Close button -->
  <button class="close-button" aria-label="Close menu" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>

  <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
    <!-- Menu -->
    <ul class="vertical menu">
      <li><a href="#">Foundation</a></li>
      <li><a href="#">Dot</a></li>
      <li><a href="#">ZURB</a></li>
      <li><a href="#">Com</a></li>
      <li><a href="#">Slash</a></li>
      <li><a href="#">Sites</a></li>
    </ul>
  </div>

  <div id="bg">
  </div>
  <div class="panel panel-one">
    <div class="panel-inner">
      <div class="content">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit
          ligula pharetra.</p>
      </div>
    </div>
  </div>

  <div class="panel panel-two">
    <div class="panel-inner">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit
        ligula pharetra.</p>
    </div>
  </div>

  <div class="panel panel-three">
    <div class="panel-inner">
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit
        ligula pharetra.</p>
    </div>
  </div>


</body>

CSS

#offCanvas {
  position: fixed;
  z-index: 999;
  background-color: black;
  width: 50%;
  height: 100%;
}

.close-button {
  position: fixed;
  z-index: 1000;
}

#bg {
  background-image: url('https://unsplash.it/800?random');
  background-size: cover;
  z-index: -1;
  animation: zoom 10s;
  height: 100%;
  width: 100vw;
  position: fixed;
  -webkit-animation-fill-mode: forwards;
  background-attachment: fixed;
}

@keyframes zoom {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1.1, 1.1);
  }
}

html,
body {
  margin: 0;
  height: 100%;
}

.panel {
  position: relative;
  min-height: 100vh;
  z-index: 5;
}

.panel-fixed {
  z-index: 1;
}

.panel-inner {
  padding: 1em;
  width: 100%;
}

.panel-fixed .panel-inner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}


/* Base */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.panel-two {
  background-color: blue;
}

.panel-three {
  background-color: green;
}

.content {
  position: fixed;
}

CSS - 关闭 canvas 问题

CSS - off canvas issue

javascript

html

zurb-foundation-6