javascript - 如何在窗口调整大小时禁用和启用 ScrollMagic？

Question

我正在尝试固定 ul全尺寸屏幕上的侧边栏，然后取消该图钉并将其更改为父图 nav ul的在半尺寸屏幕上。所以基本上从一个触发器、目标和偏移开始>当屏幕尺寸改变时取消它们>(并)用新的设置固定一个新的选择器。

Answer 1

所以这是我得到的解决方案:

//full screen:
var narrow = new ScrollMagic.Scene({
  triggerElement: '#projects',
  offset: -10,
  triggerHook: 0,
  pushFollowers: false
})

//half size screen:
var wide = new ScrollMagic.Scene({
  triggerElement: '#secondary_nav',
  offset: 0,
  triggerHook: 0,
  pushFollowers: false
})

//enquire.js:  
enquire.register("screen and (max-width:980px)", {

  setup: function() {
    narrow.setPin('#secondary_nav ul').addIndicators().addTo(controller)
  },

  match: function() {
    narrow.remove().removePin();
    wide.setPin('#secondary_nav').addIndicators().addTo(controller);


  },

  unmatch: function() {
    wide.remove().removePin();
    var narrowpin = narrow.setPin('#secondary_nav ul').addIndicators().addTo(controller);

  },

})

<nav id="secondary_nav" class=''>
  <ul>
    <li class="btn"><a id='toabout' href="#about">About</a>
    </li>
    <li class="btn"><a id='toprojects' href="#projects">Projects</a>
    </li>
    <li class="btn"><a id='tocontact' class='tocontact' href="#contact_a">Contact</a>
    </li>
  </ul>
</nav>