ScrollMagic 中的 .setClassToggle 向下滚动时不会删除类答案

【问题标题】：.setClassToggle in ScrollMagic does not remove class when scrolling downScrollMagic 中的 .setClassToggle 向下滚动时不会删除类
【发布时间】：2016-09-17 17:31:19
【问题描述】：

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

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

$(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/

【问题讨论】：

你能提供你的代码吗？
没问题：jsfiddle.net/2sx91ya6

标签： javascript scrollmagic

【解决方案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/

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

【讨论】：

太棒了！这无疑为我指明了正确的方向。我只是在持续时间内使用了实际 div 的高度。持续时间：$('div-id').height() 再次感谢。

【解决方案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

【讨论】：