Materialise的CSS：獲取手風琴上的視差

頂部設置試圖稍微設置Materialise的可摺疊的手風琴視差圖上頂/中時工作。我嘗試了多種方法來解決這個問題，但每個方法都有自己的問題與手風琴的觀點相沖突，或者手風琴不工作。Materialise的CSS：獲取手風琴上的視差

我把視差容器外手風琴和組可摺疊手風琴的邊距所以它會向上移動到視差部分，但一旦進入視差它不再起作用。只有視差以下的部分才起作用，而且他們的移動速度非常緩慢而笨拙。

問題：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

$(document).ready(function() { 
    $('.parallax').parallax(); 
    // Accordian Initialization 
    $('.collapsible').collapsible({ 
    accordion: false 
    }); 
});

一個實例，如果有溢出手風琴時，它的積極和滴下來，不拉伸的實際視差部分的方式我已經設置了視差div容器內的手風琴，但不確定。

Problem2：從你的CSS .parallax容器Demo2

來源

2016-06-23 Gorgon_Union

刪除高度。

我會得到完全消除視差，對移動設備和臺式機的性能較差。我在一臺非常高端的電腦上，它需要資源在瀏覽器中渲染。你不應該爲了一些花哨的滾動效果而犧牲用戶體驗。

這會爲你想要的東西的工作：

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

來源

2016-06-23 00:36:11

卸下的高度'''.parallax-container'''不能解決與手風琴的問題。至於視差，我知道它有不良的性能問題，並使用大量的資源。我現在並不擔心這一點，因爲現在任何人都不會看到這一點。只是測試一下並注意到這個問題。 –

結帳我更新的答案，它會以你想要的方式工作。 –

Materialise的CSS：獲取手風琴上的視差

回答

相關問題