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

Question

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

- Moliere

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>

- Moliere