I've created a page with divs that create a parallax effect on scrolling, you can view the demo here.
However, I encountered an issue when adding a Foundations off-canvas menu - it prevents me from being able to scroll down. How can I resolve this and still maintain the scrolling effect with the off-canvas menu?
This is the HTML with the added Foundations off-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">×</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>
Update:
In my testing, I observed that removing position: fixed; from the content class allows for scrolling. However, I need to keep the content fixed so it doesn't move upon scroll. How can I achieve this while keeping the off-canvas functionality intact?
I attempted to modify the Foundation classes to allow for scrolling of the entire page content. Although I can now scroll, the off-canvas menu remains unfixed when opened. Here is what I tried:
.off-canvas-wrapper {
height: auto;
position: static;
overflow: scroll;
}
.off-canvas-wrapper-inner {
height: auto;
}
.off-canvas {
position: fixed;
}