Javascript 滚动动画

Question

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

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

});

问题在于它永远不会进入其他条件。

Answer 1

scroll 事件在滚动期间会触发多次，因此每次触发都会将一个新动画添加到动画队列中。队列变得非常庞大，您等不及要播放 "right" 动画了。

为避免这种情况，您可以使用 .stop() 刷新队列的方法：

$(window).on('scroll', function() {
  var sign = $(window).scrollTop() > 50 ? '' : '-';
  $('#top-page').stop().animate({right: sign + '50px'}, "slow");
});

body {
  height: 300vh
}

#top-page {
  position: fixed;
  top: 0;
  right: -50px;
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-page">TOP PAGE</div>

Answer 2

$(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");
    }
});

Javascript 滚动动画

Javascript animation on scroll

javascript

jquery

jquery-animate