Question

我正在使用ScrollMagic，触发点位于视口的中间。而且我希望动画可以双向触发（反向：true）

触发div向下移动50px时出现问题，它会使div上下跳跃。

对于这个简单的例子，我只有两个固定高度的div。我想在触发时将第二个Div向下移动50px。

请在此处查看完整的代码和CSS：https://codepen.io/steve822/pen/EBWWeZ 要模拟该问题，只需缓慢滚动至稍高于中间点的位置，然后在开始跳跃时停止。

<div class="bluebox"></div>
<div class="my-div"></div> 

.bluebox {
  background: blue;
  height: 150px
}

.my-div {
    position: relative;
    top: 0px;
    background: tomato;
    height: 100px
}

.my-div.move-down {
    top: 50px;
    transition: top 1s;
}


var $j = jQuery.noConflict();

var controller = new ScrollMagic.Controller();

$j('.my-div').each(function() {
    new ScrollMagic.Scene({
            triggerElement: this,
            reverse: true,           

        })
        .setClassToggle(this, "move-down")          
        .addTo(controller);

});

如果我将鼠标悬停在视口中间的上方，则会出现问题，但是div会预期下降，但是，它将越过触发点并移除该类，使div再次向上移动并越过触发器在上升的过程中，最终结果是div上下移动不停。

我清楚地了解了问题的原因，但是我不太确定如果要将Div调低的话该如何防止。谢谢！！

ScrollMagic-如何在div向下移动并超过触发点时防止触发

0 个答案: