ScrollMagic：スティッキー/固定要素の下にスティック要素

Question

スクロールマジックの "setPin"メソッドを使用して、特定の時点で要素をスティッキーにすることを試みます。 私はあなたの問題を示すためにスクリーンキャストを作った：https://www.dropbox.com/s/7r1xu1gdgm22is8/stick.mov?dl=0 私は既にscrollmagic（ロゴのサイズ変更）でヘッダーセクションを操作していることが分かる。青色のバーが貼り付けられたヘッダーセクションに達すると、私はそれもstickedされたいので、青色のバーは常に表示されます。それは私が何を意味することを願っていますか？ :) デフォルトでは、要素がビューポートの中心に達すると、scrollmagics setpinメソッドがトリガされます。しかし、私は要素が "私の押されたヘッダーの下の境界に触れる"トリガーが欲しい。 これは、これまでの私のコードです：

jQuery(document).ready(function($){ 
    var controller = new ScrollMagic.Controller(); 
    var introTl = new TimelineLite(); 
    introTl.to(logoimg, 1, {width: 100, autoRound:false}); 
    var introScene = new ScrollMagic.Scene({duration: 200}).setTween(introTl).addTo(controller); 
    var scene2 = new ScrollMagic.Scene({ 
     triggerElement: "#actionbar" 
    }) 
    .setPin("#actionbar") 
    .addTo(controller); 
}); 

Answer 1

はduration: 200

triggerHookの前または後にtriggerHookとtriggerElementオプションを使用すると、ピンをトリガし、画面上の位置です。これは、0〜1（画面の上部）（画面の下部）

triggerElemeentが有用であるべきである

var introScene = new ScrollMagic.Scene({triggerElement: '#img_above_blue_bar', triggerHook: 0, duration: 200}).setTween(introTl).addTo(controller); 

の線に沿ってトリガー

何かを特定の範囲です。