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

Question

如何成功重新加载滚动魔术代码并更改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
}