z-index問題，同時使用scrollmagic

我正在使用scrollmagic來顯示目前正在處理的項目中的內容。我的設計在容器的頂部和底部使用「楔子」。我已經設法實現了我希望使用svg作爲'楔形'的結果，並將第一個用z-index粘貼到頁面頂部：1;z-index問題，同時使用scrollmagic

因此該圖層覆蓋隨後的其餘內容。請參閱下面的codepen。

http://codepen.io/oliver_randell/pen/MyLNON

我真正需要的是能夠點擊宣傳片盒的按鈕！

任何幫助將不勝感激。

<section id="intro" class="intro"> 
    <div class="content"> 
     <div class="row"> 
      <div class="medium-10 medium-offset-1 large-8 large-offset-2 columns"> 
      <div class="fade-trigger"></div> 
      <h2>Intro title</h2> 
      <h3>Intro Subtitle</h3> 
      <p>Some extract text</p> 
     </div> 
    </div> 
    </div> 
</section> 
<section class="promo-boxes"> 
<!-- THIS IS WHERE THE TOP WEDGE NEEDS TO SIT --> 
<div id="pinned-trigger1"> 
    <div id="pinned-element1"> 
     <div class="top-wedge"></div> 
    </div> 
</div> 
<!-- BOX 1 --> 
<div id="pinned-trigger2" class="promo box1 full-screen"> 
    <div id="pinned-element2"> 
    <div class="wrapper"> 
    <div class="content"> 
     <div class="img-container"> 
     <div class="img" style="background-image: url('https://unsplash.it/800/800');"></div> 
     </div> 
     <div class="text"> 
     <div class="row"> 
      <div class="large-4 large-offset-8 columns"> 
      <div class="valign-middle"> 
       <div> 
       <h3>Title</h3> 
       <p>Text</p> 
       <a href="#_" class="button">Button</a> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
</div> 


<div id="pinned-trigger4" class="promo box3"> 
<div class="content"> 
    <div class="img-container"> 
    <div class="img" style="backgroundimage:url('img-link.png');"> 
    </div> 
    </div> 
    <div class="text"> 
    <div class="row"> 
     <div class="large-4 large-offset-8 columns"> 
     <div class="valign-middle"> 
      <div> 
      <h3>Title</h3> 
      <p>Text</p> 
      <a href="#_" class="button">Button 2</a> 

      </div> 
     </div> 
     </div> 
    </div> 
     </div> 
    </div> 
    <div id="pinned-element4"> 
     <div class="bottom-wedge show-for-large"></div> 
    </div> 
    </div> 
</section> 

<section class="next-section full-screen"> 
    <h2>this is the next section</h2> 
</section>

來源

2016-05-10 Oliver Randell

所以......我只是說：

#pinned-trigger1 { 
    position-events: none; 
}

瞧！

來源

2016-05-11 00:20:29

z-index問題，同時使用scrollmagic

回答

相關問題