如何在窗口大小上禁用和啓用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>