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 class="content long">
    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/5c3naLLg/17/

向下滚动页面时，我需要保留固定区域，但只能使其与div.content的重叠以及两个div.content部分之间的边距不可见。换句话说，div.content和它们之间的边距需要隐藏它们重叠时的固定。

Answer 1

有了这个库，没有“钩子”就不可能达到这样的结果。

原因：

1. 如果场景中没有“持续时间”，则不会取消固定障碍。
2. 如果您具有“持续时间”，则固定块的高度会更高。
3. 您不能使用偏移量，因为您不知道内容高度，也可能不知道固定块高度。

您可以尝试的方式

1. 添加自定义侦听器，并将固定的块类更改为“固定”位置

但是它不能按您希望的那样工作。

更好的方法是通过引导程序结合使用引导程序“ scrollspy”和定位CSS选项。