CSS - 画布外问题答案

【问题标题】：CSS - off canvas issueCSS - 画布外问题
【发布时间】：2016-10-30 18:41:10
【问题描述】：

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

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

这是在画布上添加了 Foundations 的 html：

<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 类的position: fixed;，然后我可以向下滚动，但我需要以某种方式保持内容固定，以便它不会在滚动时移动，我怎样才能通过功能实现这一点画布外？

我设法通过覆盖基础类以某种方式使其工作一半，但它一点也不流畅，现在我可以滚动整个页面内容，但是打开时关闭画布并不固定，我有尝试通过将off-canvas-left 设置为position:fixed 来尝试，但这不起作用：

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

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

.off-canvas {
  position: fixed;
}

【问题讨论】：

那么您是否希望基础画布外菜单保持固定在屏幕顶部？滚动时菜单会发生什么变化？当前的小提琴是否已链接到您希望它的外观但顶部固定有一个菜单？
我想离开画布，但是当我拥有它时，我无法向下滚动到第二面板。小提琴只是为了展示我在离开画布时想要保留的滚动效果。当我没有画布时，我无法进行任何滚动。
我已经给出了一个答案，试图解决这个问题
你在哪里发的？期待看到它

标签： javascript html css zurb-foundation-6

【解决方案1】：

我修改了您提供的代码并添加了一个画布外菜单。我希望这是您所需要的。

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

【讨论】：

很遗憾，这不起作用，我可以滚动，但还有很多其他问题，第一面板中的内容没有固定，滚动时会下降很多。
我已将链接添加到 JSFiddle 以确保您拥有最新的编辑。
我已经尝试过您最近的更新，但效果不佳
啊，我很抱歉。我以为你想让第一个块的菜单和内容固定，然后让其他块在它们上方升起，从而产生视差效果。当前的 JSFiddle 是我对您需要的最佳解释。
没问题，感谢您的尝试，很抱歉没有说清楚。