CSSオフキャンバスの問題

私には、スクロールに視差効果を与えるためのdiv設定があるページがあります。これはfiddleです。CSSオフキャンバスの問題

キャンバスメニューからファンデーションを追加すると問題が発生し、もうスクロールできなくなります。それを修正してオフキャンバスメニューで同じスクロール効果を持たせるにはどうすればいいですか？

これは、基礎と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;を削除する場合は、その後、私は下にスクロールすることができますテストされ、私は維持する必要が

を更新しましたスクロールしても動かないように内容が固定されていて、機能しているオフキャンバスでどうすればいいですか？

基本クラスを上書きすることで何とか半分動作することができましたが、滑らかではありません。ページコンテンツ全体をスクロールできますが、オフキャンバスは開かれても固定されません。 position:fixedでoff-canvas-leftを設定することで、試してみましたが、それはうまくいきませんでした：

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

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

.off-canvas { 
    position: fixed; 
}

出典

2016-10-30 Leff

は、だからあなたは、画面の上部に固定されたままにする基盤オフキャンバスメニューをしたいですか？スクロールするときにメニューにはどうしたらいいですか？現在のフィドルは、あなたが見た目をどのようにしたいのかをリンクしていますが、メニューはトップに固定されていますか？ – Todd

私はキャンバスをそのまま使いたいと思っていますが、私が持っているときにはパネル-2にスクロールダウンできません。フィドルはキャンバスを外したときに残したいスクロール効果を表示するだけでした。私がキャンバスを持っていないとき、私はスクロールすることはできません。 – Leff

私はこれを解決しようとする答えを出しました – Todd

私はあなたがオフキャンバスメニューを提供し、追加されたコードを修正しました。私はこれがあなたが必要としていたことを望みます。

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

出典

2016-10-30 20:38:25 Todd

残念ながら、それは動作していない、私はスクロールすることができますが、これと他の多くの問題があります、コンテンツはパネル1で修正されていない、 – Leff

JSFiddleへのリンクを追加して、最新の編集を行っていることを確認しました。 – Todd

最新のものを試しましたが、うまくいきません。 – Leff

CSSオフキャンバスの問題

答えて

関連する問題