.setClassToggle in ScrollMagic在向下滚动时不移除类

Question

因此，我一直将ScrollMagic.js与GSAP.js结合使用，并在向下滚动时使用.setClassToggle作为侧导航活动状态。

它添加'active‘类，但不删除前一个类，直到您再次向上滚动，然后它删除它。但是这个演示展示了两种方式的切换。这是我的密码：

$(function () {

  var controller = new ScrollMagic.Controller();

  new ScrollMagic.Scene({triggerElement: "#Home"})
              .setClassToggle(".side-nav a.home", "active")                
              .addTo(controller);
  new ScrollMagic.Scene({triggerElement: "#Overview"})
              .setClassToggle(".side-nav a.overview", "active")
              .addTo(controller);
});

JS固定链接：https://jsfiddle.net/2sx91ya6/

Answer 1

• 全局指定持续时间(场景高度)属性 var controller = new ScrollMagic.Controller({ globalSceneOptions: {duration: 561} }); https://jsfiddle.net/2sx91ya6/4/
• 或者对每一个场景都是分开的。 new ScrollMagic.Scene({ triggerElement: "#Home", duration: 561 }) https://jsfiddle.net/trkaplan/2sx91ya6/5/

如果场景高度是动态的/或者您不想手动指定，请参见这里的例子来计算每个场景的持续时间。

Answer 2

指定元素大小为100%。

    var controller = new ScrollMagic.Controller({
    globalSceneOptions: {duration: "100%"}
});

我分叉了你原来的JS Fiddle，这样你就可以在这里看到这个：https://jsfiddle.net/grayayer/1v6fusye/

在这里的ScrollMagic文档中描述了这一点：duration.html