。ScrollMagic中的setClassToggle在向下滾動時不會刪除類

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/

• 或爲每個場景seper ately。

  new ScrollMagic.Scene({ triggerElement: "#Home", duration: 561 })

  https://jsfiddle.net/trkaplan/2sx91ya6/5/

如果現場高度動態/或者你不想手動指定，看到example here計算時間爲每個場景。