scrollmagicを使ってZ-インデックスを発行しています

Question

私が現在取り組んでいるプロジェクトにコンテンツを表示するのにscrollmagicを使用しています。私が持っているデザインは、容器の上部と下部に「ウェッジ」を使用しています。私は、「ウェッジ」のためにsvgを使用し、最初のものをZ-インデックスを持つページの上部に貼り付けることによって結果を達成することができました。

この結果、このレイヤーは、後に続くコンテンツの残りをオーバーレイします。下記の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> 

Answer 1

だから... ...私はちょうど追加：

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

出来上がり！