Question

我使用scrollmagic来显示我目前正在处理的项目中的内容。我使用的设计＆＃39; wedges＆＃39;在容器的顶部和底部。我已经设法达到了我想要使用svg来实现＆＃39; wedge＆＃39;并使用z-index将第一个粘贴到页面顶部：1;

因此，该图层将覆盖随后的其余内容。请参阅下面的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;
}

瞧!!

使用scrollmagic时的z-index问题

1 个答案: