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 选项也通过引导程序。