jquery - 物化 CSS : Getting accordian to work when set on top of parallax

Question

尝试将 Materialise Collapsible Accordion 设置为稍微位于顶部/内部视差 View 。我尝试了多种方法来解决这个问题，但每种方法都有自己的问题与 Accordion 的观点相冲突，或者 Accordion 无法正常工作。

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

问题: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 中设置了一个 Accordion ，但不确定是否有办法在 Accordion 处于事件状态并下降时溢出 Accordion ，而不拉伸(stretch)实际的视差部分。

问题 2:Demo2

Answer 1

从您的 CSS 中的 .parallax-container 中移除高度。

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

这将适用于您想要的:

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