滚动的Javascript动画

我试图在页面上的元素上做简单的动画

$(window).on('scroll',function () {
    if($(window).scrollTop() > 500){
        $('#top-page').animate({ right: '50px' }, "slow");
    }else{
         $('#top-page').animate({ right: '-50px' }, "slow");
          }

});

---

问题在于它从不进入else状态。

滚动过程中会多次触发

滚动

事件，因此每次触发新动画时，都会将新动画添加到动画队列中。队列将增长到巨大的规模，您无法等待“正确”的动画何时播放

为了避免这种情况，可以使用刷新队列的

.stop（）

方法：

$（窗口）.on（'scroll'，function（）{
变量符号=$（窗口）.scrollTop（）>50？''：'-'；
$（'#首页'）.stop（）.animate（{right:sign+'50px'}，“slow”）；
});
正文{
高度：300vh
}
#首页{
位置：固定；
排名：0；
右：-50px；
背景：红色
}

首页
它的工作原理与我预期的一样，但有一个小问题，我必须滚动到首页才能应用css
$(window).on('scroll',function () {
    //var body = document.body; // For Safari
    var html = document.documentElement; // Chrome, Firefox, IE and Opera

    if(html.scrollTop > 500){
        $('#top-page').animate({ right: '50px' }, "slow");
    }else{
         $('#top-page').animate({ right: '-50px' }, "slow");
    }
});