Javascript ScrollMagic：当内容与固定区域重叠时隐藏内容

我正在我的页面上使用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>

以下是JSFIDLE演示：

---

向下滚动页面时，内容区域（

div.content

）与固定区域重叠。如何在不隐藏背景图像的情况下隐藏重叠区域中的内容？换句话说，我可以在固定区域中看到背景图像。

您可以将

.container

规则中的相同背景项添加到

.pin区域

规则中作为解决方法。因此，

.pin区域

将是：

.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=新的ScrollMagic.Scene({
triggerElement:“#触发器”，
triggerHook:“onLeave”
})
.setPin（“引脚区域”）
.addTo（控制员）
正文{
填充：0；
}
.集装箱{
背景图像：url（'http://www.nationalgeographic.com/content/dam/science/photos/000/011/1106.adapt.1900.1.jpg');
背景位置：右下角；
背景附件：固定；
}
.触发前{
高度：200px；
}
.扳机{
最小高度：1
}
.销区{
背景图像：url（'http://www.nationalgeographic.com/content/dam/science/photos/000/011/1106.adapt.1900.1.jpg');
背景位置：右下角；
背景附件：固定；
字号：2em；
颜色：#fff；
填充：30px；
边框：2倍实心#fff；
文本对齐：居中；
}
.内容{
;
高度：800px；
}

这是一个固定区域。
Lorem ipsum是一种伪拉丁语文本，用于网页设计、排版、布局和印刷，以取代英语，强调设计元素而非内容。它也称为占位符（或填充符）文本。这是一个方便的实体模型工具。它有助于概述
文档或演示文稿的视觉元素，如排版、字体或布局。Lorem ipsum主要是古典作家和哲学家西塞罗的拉丁文本的一部分。它的单词和字母已经被添加或删除而改变，因此被故意更改
使其内容变得毫无意义；它不再是真正的、正确的或可理解的拉丁语了。

.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;
}