如何为同一ScrollMagic触发器设置多个setClassToggle（多类名）

嘿，我明白你的需求——想让同一个滚动触发器触发时，给多个不同元素同时切换类名对吧？你的原代码里有个小问题：你重复调用了.addTo(ctrl)，这会创建三个独立的场景，每个场景都绑定同一个触发器，这显然不是你想要的效果。

正确的做法是利用ScrollMagic的链式调用特性：一个场景对象可以连续调用多个.setClassToggle()方法，最后只需要调用一次.addTo(ctrl)把这个场景添加到控制器即可。这样所有的类切换逻辑都会绑定到同一个场景上，当触发器触发时，所有目标元素都会同步切换类名。

下面是修正后的完整代码：

// init
var ctrl = new ScrollMagic.Controller();
var videoArea;
// return cached value
function getVideoArea () {
  return videoArea;
}
// update value
function updateVideoArea () {
  videoArea = $(window).height() + $("#start-anim2").height();
}
// update on resize
$(window).on("resize", updateVideoArea);
// set initial value
updateVideoArea();
// create scene
var scene = new ScrollMagic.Scene({
  triggerElement: "#start-anim2",
  triggerHook: "onEnter",
  duration: getVideoArea
})
.on("enter", function(e) {
  console.log("start");
})
.on("leave", function(e) {
  console.log("stop");
})
// 链式调用多个setClassToggle，每个针对不同元素
.setClassToggle(".img-app-three:nth-child(2)", "active")
.setClassToggle(".img-app-three:nth-child(3)", "active")
.setClassToggle(".img-app-three:nth-child(4)", "active")
// 最后只需要添加一次到控制器
.addTo(ctrl);

关键说明： #

• 每个.setClassToggle(target, className)都会给场景添加一个类切换的动作，所有动作都属于同一个场景
• 只有最后一次.addTo(ctrl)是必要的，它把包含所有动作的场景绑定到控制器上
• 当场景进入/离开时，所有目标元素的active类会同时被添加/移除

这样修改后，你就能实现同一触发器触发多个元素的类切换效果啦！

内容的提问来源于stack exchange，提问作者Luca