CSS - off canvas issue
<p>I have a page, where I have divs setup to give a parallax effect on scrolling. This is the <a href="https://jsfiddle.net/beqswr69/49/" rel="nofollow">fiddle</a>.</p>

<p>I have a problem when I add a foundations off canvas menu, then I can't scroll down anymore. How can I fix that and be able to have the same scrolling effect with the off canvas menu?</p>

<p>This is the html with Foundations added off canvas:</p>

<pre><code>&lt;body&gt;
  &lt;div class="off-canvas-wrapper"&gt;
      &lt;div class="off-canvas-wrapper-inner" data-off-canvas-wrapper&gt;
        &lt;div class="off-canvas position-left" id="offCanvas" data-off-canvas&gt;

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

          &lt;!-- Menu --&gt;
          &lt;ul class="vertical menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Foundation&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Dot&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;ZURB&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Com&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Slash&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sites&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;

        &lt;/div&gt;

        &lt;div class="off-canvas-content" data-off-canvas-content&gt;
          &lt;div id="app"&gt;
             &lt;div id="bg"&gt;
          &lt;/div&gt;
          &lt;div class="panel panel-one"&gt;
            &lt;div class="panel-inner"&gt;
              &lt;div class="content"&gt;
                &lt;h1&gt;Lorem ipsum dolor sit amet&lt;/h1&gt;
                &lt;p&gt;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.&lt;/p&gt;
             &lt;/div&gt;
           &lt;/div&gt;
         &lt;/div&gt;

         &lt;div class="panel panel-two"&gt;
           &lt;div class="panel-inner"&gt;
            &lt;h2&gt;Lorem ipsum dolor sit amet&lt;/h2&gt;
            &lt;p&gt;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.&lt;/p&gt;
           &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Updated</strong></p>

<p>I tested if I remove <code>position: fixed;</code> for the <code>content</code> class, then I can scroll down, but I need to keep the content somehow fixed so that it doesn't move upon scroll, how can I achieve that with functioning off-canvas?</p>

<p>I managed to get it half-working somehow by overwriting the foundation classes, but it is not smooth at all, now I can scroll the whole page content, but the off-canvas is not fixed when it is opened, I have tried by setting <code>off-canvas-left</code> with <code>position:fixed</code> but that didn't work:</p>

<pre><code>.off-canvas-wrapper {
  height: auto;
  position: static;
  overflow: scroll;
}

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

.off-canvas {
  position: fixed;
}
</code></pre>