Javascript 使用.animate和.scrollTop动画不流畅

我试图在用户向下滚动页面时触发动画。因此，当他滚动超过某个点时，我希望有一个div在网页中滑动，如果用户向上滚动，我不希望它滑走

它工作得很好，只是当我在动画中上下滚动时，它会延迟它，并且运动根本不是流体

我正在使用此javascript触发动画：

    $(document).ready(function() { 
    jQuery(function($) {
        function fixDiv() {
            var $cacheLaptop = $('#red-div');
            var check=new Boolean();
            check=false;
            if ((check==false) && ($(window).scrollTop() > 500)) {  
                check=true;    
                $cacheLaptop.stop().animate(
                    { left: 0 }, {
                     duration: 1000,
                 });   
            }
        }
        $(window).scroll(fixDiv);
        fixDiv();
    });

}); 

我创建了一个JSFIDLE，以便您可以看到我的问题：

有人知道如何解决这个问题吗

---

非常感谢

我认为这更符合你的意图

$(document).ready(function() { 
    function fixDiv() {
        var $cacheLaptop = $('#red-div');
        if (($(window).scrollTop() > 500)) {   
            $cacheLaptop.animate(
                { left: 0 }, {
                    duration: 1000,
                });   
            $cacheLaptop.off('scroll');
        }
    }
    $(window).scroll(fixDiv);
    fixDiv();
}); 

代码中发生的情况是，用户每次滚动时都会调用

fixDiv

函数，并从div的当前位置重新启动动画，持续时间为1秒。这显然不是您想要的，您试图通过检查是否设置了标志来缓解这种情况——但您在处理程序函数的范围内定义了布尔值，因此每次调用处理程序时（在本例中，每次用户滚动时）都会重新定义布尔值

相反，当用户滚动时调用处理程序函数，仅当滚动到500像素标记以下时才显示动画，执行此操作后，通过调用

$cacheLaptop.off（'scroll'）删除滚动处理程序

希望对您有所帮助。
您应该使用此插件：
触发动画开始，然后让它播放