向下滚动时，ScrollMagic 中的 .setClassToggle 不会删除 class

Question

所以我一直在使用 ScrollMagic.js 和 GSAP.js，并在您向下滚动时使用 .setClassToggle 作为侧边导航活动状态。

它添加 'active' class，但不删除前一个，直到您再次向上滚动，然后将其删除。但是演示显示它可以双向切换。这是我的代码：

$(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 Fiddle Link: 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/

如果您不想手动指定场景高度 dynamic/or，请参阅 example here 计算每个场景的持续时间。

Answer 2

指定元素大小为 100%。

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

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

此处的 ScrollMagic 文档对此进行了描述：http://scrollmagic.io/examples/basic/responsive_duration.html

向下滚动时，ScrollMagic 中的 .setClassToggle 不会删除 class

.setClassToggle in ScrollMagic does not remove class when scrolling down

javascript

scrollmagic