Javascript 使用JS媒体查询更改ScrollMagic triggerHook位置

我如何才能成功地重新加载我的卷轴魔法代码并更改触发钩位置？当我尝试使用下面的代码时，它会将trigerHook设置两次，这样屏幕上就有两个。我的ScrollMagic代码如下所示：

//Scrollmagic & gsap to move buildings//
var controller = new ScrollMagic.Controller();

// build scene first building

new ScrollMagic.Scene({
triggerHook: myTriggerHook,
triggerElement: "#sec1",
duration: $("#sec1").height() + 0
})
.on("enter leave", function() {
  $("#sec1").toggleClass("show-slides");
  $("#nav").toggleClass("startx");
})
.addIndicators()
.addTo(controller);
};

loadScrollMagic();
var myTriggerHook;

下面是我对媒体的提问。。您可以看到我正在尝试更改myTriggerHook变量，并以不同的屏幕宽度重新加载ScrollMagic代码。我错过了什么

//Media Queries
var mqls = [
  window.matchMedia("(min-width: 1024px)"),
  window.matchMedia("(min-width: 768px) and (max-width: 1023px)"),
  window.matchMedia("(max-width: 767px)")
];

function mediaqueryresponse(mql) {
  if (mqls[0].matches) {
    myTriggerHook = 0.5;
    loadScrollMagic();
  }
  if (mqls[1].matches) {
    myTriggerHook = 0.3;
    loadScrollMagic();
  }
  if (mqls[2].matches) {
    document.body.style.backgroundColor = "green";
  }
}

for (var i = 0; i < mqls.length; i++) {
  mediaqueryresponse(mqls[i]); // call listener function explicitly at run time
  mqls[i].addListener(mediaqueryresponse); // attach listener function to listen in on state changes
}

//媒体查询
var mqls=[
window.matchMedia（（（最小宽度：1024px）），
window.matchMedia（（（最小宽度：768px）和（最大宽度：1023px）），
window.matchMedia（（最大宽度：767px））
];
函数mediaqueryresponse（mql）{
如果（mqls[0]。匹配项）{
myTriggerHook=0.5；
loadScrollMagic（）；
}
if（mqls[1]。匹配项）{
myTriggerHook=0.3；
loadScrollMagic（）；
}
if（mqls[2]。匹配项）{
document.body.style.backgroundColor=“绿色”；
}
}
对于（var i=0；i

看起来您每次都在加载ScrollMagic，但并没有停止上一次迭代。因此，它将保留默认点。