Materialize CSS: Getting accordian to work when set on top of parallax

Trying to set a Materialize Collapsible accordion slightly on-top/inside parallax view. I've tried a multiple ways of tackling this but each has it's own issues conflicting with the view of the accordion, or the accordion just not working. I put the accordion outside the parallax-container and set Collapsible accordion's margin-top so it would move up onto the parallax section, but once it enters the parallax it no longer works. Only the sections that are below the parallax work, and they move really slow and clunky-like. Problem: Demo HTML <!-- Parrallax --> <div class="parallax-container"> <div class="parallax"><img src="http://blogs.acu.edu/learningstudio/files/2012/12/Chaos.png"></div> </div> <!--/parrallax-container--> <div class="row"> <div class="col s6 offset-s3"> <ul class="collapsible" data-collapsible="accordion"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>Second</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> </ul> </div> </div> CSS /* Change Margin top to 0 to see it's working completely */ .row { margin-top: -98px; } JS $(document).ready(function() { $('.parallax').parallax(); // Accordian Initialization $('.collapsible').collapsible({ accordion: false }); }); One instance, I've set an accordion inside the parallax-container div, but unsure if there is a way to overflow the accordion when it's active and drops down, without stretching the actual parallax section. Problem2: Demo2