Materialise CSS：让手风琴在视差之上工作

Question

尝试稍微设置 Materialise Collapsible 手风琴 on-top/inside 视差视图。我尝试了多种方法来解决这个问题，但每种方法都有自己的问题与手风琴的观点相冲突，或者手风琴无法正常工作。

我把手风琴放在视差容器外面，并设置可折叠手风琴的边距顶部，这样它就会向上移动到视差部分，但一旦进入视差，它就不再起作用了。只有视差下方的部分起作用，它们移动得非常缓慢且笨重。

问题：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
  });
});

一个例子，我在视差容器 div 中设置了一个手风琴，但不确定是否有办法在手风琴处于活动状态并下降时溢出它，而不拉伸实际的视差部分。

问题 2：Demo2

Answer 1

从 css.

中的 .parallax-container 移除高度

我会完全摆脱视差，在移动设备和台式机上表现不佳。我在一台非常高端的计算机上，它需要资源才能在浏览器中呈现。你不应该为了一些花哨的滚动效果而牺牲用户体验。

这将满足您的需求：

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

Materialise CSS：让手风琴在视差之上工作

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

html

css

jquery

materialize