ScrollMagic：将元素粘贴到粘性/固定元素的底部答案

【问题标题】：ScrollMagic: Stick element to bottom of sticky/fixed elementScrollMagic：将元素粘贴到粘性/固定元素的底部
【发布时间】：2017-05-03 16:03:01
【问题描述】：

我尝试使用 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);
});

【问题讨论】：

标签： javascript jquery gsap scrollmagic

【解决方案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);

应该会有所帮助。

【讨论】：