ScrollMagic - 堆叠 div

如何解决ScrollMagic - 堆叠 div

我想实现类似这个例子的东西：
https://scrollmagic.io/examples/basic/section_wipes_natural.html

但是这里的想法不是固定高度的 div：
父 div 有很多不同高度的子 div。当您开始向下滚动并到达第一个 div 的底部（end 1 在下面的设置 中）时，它会停留在视口的底部。当您滚动更多时，第一个 div 将保持固定，然后第二个 div 开始潜入，并且发生与上述示例相同的事情。

这是设置：
https://codepen.io/22_4/pen/mdWvXWY

任何帮助将不胜感激。
谢谢！

解决方法

所以最后我自己弄明白了。

const main = document.querySelector(".main");
const slides = document.querySelectorAll(".slide");

var controller = new ScrollMagic.Controller();

const init = () => {
    slides.forEach((slide,i) => {
        new ScrollMagic.Scene({
            triggerElement: slide,triggerHook: 0,duration: 0,offset: slide.clientHeight - window.innerHeight
        })
            .setPin(slide,{ pushFollowers: true })
            .addIndicators()
            .addTo(controller);
    });
};

init();

代码在笔中更新：
https://codepen.io/22_4/pen/mdWvXWY