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

Question

所以我一直在使用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/

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/

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