如何在窗口大小上禁用和启用ScrollMagic？

Question

我试图将侧栏的ul固定在全尺寸屏幕上，然后取消该引脚并将其更改为ul的父屏幕nav。 因此基本上以一个触发器，目标和偏移量开始>在屏幕大小改变时>取消它们（并且）用新设置固定新选择器。

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>