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>

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

1 个答案: