无法使用ScrollMagic进行固定

Question

在我的一生中，我不能让一个简单的pin使用ScrollMagic工作。我不知道我做错了什么。我花了几个小时试图弄清楚，但我还是在这里

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);