ScrollMagic setClassToggle Persistance？

Question

我使用的是ScrollMagic中的setClassToggle()方法。其思想是，当您向下滚动传递触发器时，可以将css类添加到元素。如果你向上滚动传递一个触发器，它将从元素中删除这个类。如此处的文档所述：

http://scrollmagic.io/docs/ScrollMagic.Scene.html#setClassToggle

例如：

scene.setClassToggle("#my-elem", "myclass");

然而，我不希望当你向上滚动时通过触发器移除这个类。我只想要类添加和保存后，您向下滚动通过触发器。如何让Scroll Magic以这种方式运行？这有可能吗？

Answer 1

您需要将reverse设置为false。它缺省设置为true可能

反转: false

http://scrollmagic.io/docs/ScrollMagic.Scene.html#reverse

Answer 2

更新

event.scrollDirection就是你要找的东西。

var myScene = new ScrollMagic.Scene({
        ...
    })
    .on('start', function (event) {
        // only run on scroll down
        if(event.scrollDirection == 'FORWARD') {
            // do things here, like adding a class
        }
    })
    .addTo(controller);

原始

scene end event似乎有这种效果。下面的代码片断添加了一个类名称，无论是在场景初始完成后向上还是向下滚动，该类名称都会保持不变。(此示例使用jQuery轻松添加类。)

var myScene = new ScrollMagic.Scene({
        ...
    })
    .on('end', function(event) {
        $('body').addClass('my-class');
    })
    .addTo(controller);