ScrollMagic：將元素粘貼到粘貼/固定元素的底部

Question

我嘗試使用scrollmagic的「setPin」方法在某個時刻使元素變得粘稠。 我做了一個截屏視頻，向您展示我的問題：https://www.dropbox.com/s/7r1xu1gdgm22is8/stick.mov?dl=0 正如您所看到的，我已經在使用scrollmagic（調整徽標大小）操縱標題部分。當藍條到達粘貼標題部分時，我希望它也被粘住，藍條總是可見的。希望我明白我的意思？！ :)默認情況下，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

使用triggerHook和triggerElement選項之前或之後duration: 200

triggerHook是觸發銷在屏幕上的位置。它的範圍從0（在屏幕的頂部）到1（在屏幕的底部）

triggerElemeent標識觸發

東西沿

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

線應該是有幫助的。