CSS - 关闭画布问题

时间:2016-10-30 18:41:11

标签: javascript html css zurb-foundation-6

我有一个页面,我有div设置,以提供滚动的视差效果。这是fiddle

当我在画布菜单中添加基础时出现问题,然后我就无法向下滚动了。我如何解决这个问题,并能够使用非画布菜单获得相同的滚动效果?

这是在画布上添加了基础的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>

更新

我测试过我是否删除position: fixed;类的content,然后我可以向下滚动,但我需要保持内容以某种方式固定,以便它不会滚动,如何我可以通过画布外的功能实现这一目标吗?

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

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

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

.off-canvas {
  position: fixed;
}

1 个答案:

答案 0 :(得分: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;
}