Search code examples
jqueryhtmlcssmaterialize

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

Solution

  • remove height from .parallax-container in your css.

    I'd get rid of the parallax altogether, has poor performance on mobile devices and desktops. I'm on a very high-end computer and it requires resources to render in browsers. You should not sacrifice user experience for some fancy scroll effect.

    This will work for what you want:

    .collapsible {
    position: relative;
    z-index: 9999;
}