2

我有这样的布局，红色的卡片固定在屏幕顶部，黄色的卡片在上面滚动。当黄色的底部边缘到达红色的底部边缘时，我需要取消固定红色，所以看起来黄色抓住了红色并将其拉过顶部。

我的看法是我需要removePin()从另一个场景调用，一个使用.yellowastriggerElement的场景offset，但它不起作用。我也尝试设置 aduration但是黄色永远不会翻过红色，而是等到持续时间从底部出现。

HTML：

<div class="content">
    <div class="green"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="purple"></div>
    <div class="brown"></div>
</div>

Javascript：

var controller = new ScrollMagic.Controller();
var slides = ['.green', '.red', '.yellow', '.purple', '.brown'];

var scene1 = new ScrollMagic.Scene({
    triggerHook: 'onLeave',
    triggerElement: slides[1],
    offset: -20,
    logLevel: 3
})
.setPin(slides[1])
.addIndicators()
.addTo(controller);

JSfiddle：http: //jsfiddle.net/rLj18ud2/

4

0 回答 0