ScrollMagic - 堆叠 div答案

【问题标题】：ScrollMagic - Stacking divsScrollMagic - 堆叠 div
【发布时间】：2021-06-16 23:54:12
【问题描述】：

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

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

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

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

【问题讨论】：

您可以考虑改用ScrollTrigger。各方面都更好。
我实际上刚刚使用 ScrollMagic 完成了一个项目，所以也许我可以提供一些帮助。我不确定你遇到了什么问题？它似乎工作正常？

标签： javascript css scrollmagic

【解决方案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

【讨论】：