ScrollMagic

Question

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

但不是固定高度 divs，这里是想法：
parent div 有许多高度不同的 child div。当您开始向下滚动并到达第一个 div 的底部（下面 setup 中的 end 1）时，它会粘在视口的底部。当您滚动更多时，第一个 div 将保持固定，然后第二个开始 dive 并且发生与上面示例相同的事情。

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

如有任何帮助，我们将不胜感激。
谢谢！

Answer 1

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

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

ScrollMagic - 堆叠 div

ScrollMagic - Stacking divs

javascript

css