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);

应该会有帮助。

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

1 个答案: