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

2019-09-28 17:03发布

我怎样才能成功地重新加载我的滚动魔码和改变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
}