javascript - ScrollMagic:将元素粘贴到粘性/固定元素的底部

Question

我尝试使用scrollmagic的“setPin”方法使元素在某个时刻粘住。 我制作了一个截屏视频来向您展示我的问题:https://www.dropbox.com/s/7r1xu1gdgm22is8/stick.mov?dl=0 正如你所看到的，我已经用scrollmagic 操作了标题部分(调整 Logo 大小)。当蓝色条到达粘贴的标题部分时，我希望它也被粘贴，以便蓝色条始终可见。希望我的意思很清楚？! :) 默认情况下，当元素到达视口(viewport)中心时，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和triggerElement选项

triggerHook 是屏幕上触发 pin 的位置。范围从0(屏幕顶部)到1(屏幕底部)

triggerElemeent 标识触发器

类似的东西

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

应该会有帮助。