Использование медиазапросов JS для изменения положения ScrollMagic triggerHook - PullRequest
Новая
       16

Использование медиазапросов JS для изменения положения ScrollMagic triggerHook

1 голос
/ 07 мая 2019

Как я могу успешно перезагрузить мой магический код прокрутки и изменить положение 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
}
...