javascript - ScrollMagic:当内容与固定区域重叠时隐藏内容

Question

我在我的页面上使用了 ScrollMagic。这是 HTML:

<div class="container">

  <div class="before-trigger">  
  </div>

  <div class="trigger" id="trigger">
  </div>

  <div class="pin-area" id="pin-area">
    This is a pinned area.
  </div>

  <div class="content">
    Lorem ipsum ...
  </div>

</div>

这是我的 Javascript:

var controller = new ScrollMagic.Controller();
var scene1 = new ScrollMagic.Scene({triggerElement: "#trigger", triggerHook: 'onLeave'})
            .setPin("#pin-area")
            .addTo(controller); 

这是 jsfiddle 演示:https://jsfiddle.net/gg8t714q/2/

向下滚动页面时，内容区域 (div.content) 与固定区域重叠。如何在不隐藏背景图片的情况下隐藏重叠区域的内容？换句话说，我能够在固定区域中看到背景图像。

Answer 1

作为解决方法，您可以将 .container 规则中的相同背景项添加到 .pin-area 规则中。所以 .pin-area 将是:

.pin-area {
  background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/011/1106.adapt.1900.1.jpg');
  background-position: right bottom;
  background-attachment: fixed;
  font-size: 2em;
  color: #fff;
  padding: 30px;
  border: 2px solid #fff;
  text-align: center;
}

var controller = new ScrollMagic.Controller();

var scene1 = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    triggerHook: 'onLeave'
  })
  .setPin("#pin-area")
  .addTo(controller);

body {
  padding: 0;
}

.container {
  background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/011/1106.adapt.1900.1.jpg');
  background-position: right bottom;
  background-attachment: fixed;
}

.before-trigger {
  height: 200px;
}

.trigger {
  min-height: 1
}

.pin-area {
  background-image: url('http://www.nationalgeographic.com/content/dam/science/photos/000/011/1106.adapt.1900.1.jpg');
  background-position: right bottom;
  background-attachment: fixed;
  font-size: 2em;
  color: #fff;
  padding: 30px;
  border: 2px solid #fff;
  text-align: center;
}

.content {
  ;
  height: 800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<div class="container">

  <div class="before-trigger">
  </div>

  <div class="trigger" id="trigger">
  </div>

  <div class="pin-area" id="pin-area">
    This is a pinned area.
  </div>

  <div class="content">
    Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline
    the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately
    render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore.
  </div>
</div>