Javascript 当用户滚动时，在两个类之间转换/转换元素（如果可能）

我试图在用户滚动时转换一个元素

如果可能，向上滚动至课堂，向下滚动至课堂

我认为这是可能的，因为魔杖在本演示中向下滚动：

但是，我不知道如何使用此脚本（）

下面是我的代码，用于告诉用户是向上滚动还是向下滚动：

$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();
    if(scrollTop>lScrollTop){
        //scroll up
    }
    else{
        //scroll down
    }
    lScrollTop = scrollTop;
});

var controller = new ScrollMagic(); 

var scene = new ScrollScene(offset: 1000).setTween( new TweenMax.to('#foo', 2, { css: { transform: 'translate3d(500px, 0, 0)' }}))
    .addTo(controller);

我设置了该元素的固定位置，以便它不会滚动到折叠之外（用于演示目的）。您将看到，在滚动1000像素之前，它不会启动动画，而在<1000像素时，它会反转动画。我只是从左向右转换，但这将适用于任何转换值

更新了和代码

var controller = new ScrollMagic();

var scene = new ScrollScene({ offset: 1000}).setTween( new TweenMax.to('#foo', 2, { css: { top: 150 } }), 1000)
    .addTo(controller);

---

你可以把它作为TweenMax对象的一部分…@brbcoding是的，但是你能告诉我怎么做吗。我试着自己做，但我得到一个错误vars未定义。

var controller=new ScrollMagic（）；var scene=new scrollsecene（{offset:1000}）.setTween（new TweenMax.to（'#foo'，2，{css:{top:'32px'}}），1000）。addTo（controller）

是我的，但当scrollTop达到1000时，它会产生动画。我希望它在滚动条移动时移动，直到达到样式（32px）。我现在没有收到任何错误，但它仍然不工作：感谢您的帮助！谢谢你，为那个愚蠢的错误感到抱歉。但是，它仍然在滚动位置设置动画。我已经看到这个脚本能够在滚动条移动时设置动画。因此，它会附着到滚动条并移动，直到达到样式。我想让它转到位置：固定，顶部：32px。并且随着滚动条的移动而移动。哦，我明白了。。。也只需给它传递一个持续时间参数

var scene=new scrollsecene（{offset:32，duration:100}）.setTween（new TweenMax.to（'#foo'，0.5，{css:{transform:'translate3d（0，150px，0）}}））.addTo（controller）

。谢谢，工作得很好！请用此代码更新答案。