无法固定使用ScrollMagic

Question

在我的生命中，我无法使用ScrollMagic获得一个简单的引脚来工作。我不知道我在做什么错。现在的网站无法简化，但是当我尝试向div中添加一个图钉时，它不起作用。我花了数小时试图弄清楚，但我在这里。

https://jsfiddle.net/v0z9hb6c/

我的JS代码：

var controller = new ScrollMagic.Controller();
var pinIntroScene = new ScrollMagic.Scene({
    triggerElement: '#intro',
    triggerHook: 0
})
.setPin('#intro')
.addTo(controller);

我目前只能停留在介绍div的位置。 请帮忙！

Answer 1

您需要指定持续时间。例如，“ 100％”会将其固定为与容器高度相同的值。
默认持续时间为0，因此只有当用户向后滚动到开始位置时，该元素才会被取消固定。因为您的元素位于页面顶部，所以我认为这就是为什么您看不到固定的原因。

https://jsfiddle.net/pm1vc7oh/27/

var controller = new ScrollMagic.Controller();
var pinIntroScene = new ScrollMagic.Scene({
    triggerElement: '#intro',
    triggerHook: 0,
    duration: "100%" // can also be 300 (for 300px)
})
.setPin('#intro')
.addTo(controller);