javascript - div 在滚动位置上的动画位置

Question

为滚动位置上的 div 位置设置动画的最佳方法是什么？从本质上讲，当您到达页面上的某个点时...固定元素将动画起来。

我已经在下面包含了我目前拥有的...但是它有点慢并且似乎向上滑动...慢慢...一半...然后完成。有什么想法吗？

var shareHeight = $('.related-share-container').height();
$('.related-share-container').css('bottom',-shareHeight);
$(window).scroll(function() {   
     if ($(window).scrollTop() + $(window).height() > $(document).height() - 150) {
        $('.related-share-container').stop().animate({ bottom: 0 }, 500);
     } else {
         $('.related-share-container').stop().animate({ bottom: -shareHeight }, 500);
     }
});

奖励更新

这是我正在开发的开发站点:http://goo.gl/KcFdE6如您所见，如果您滚动到底部并停止，它会很好地向上滑动，但是，如果您继续滚动……它会与动画交互，您可以实现非常跳跃/缓慢的过渡。有什么想法吗？

Answer 1

它的发生是因为每次滚动运动之前的动画都会停止并且新的动画开始，这比之前的动画要慢，因为它的动画距离更短。因此，您需要在代码中添加一些标志来防止同一动画一次又一次地触发。

修改后的 JS:

我在这里使用 done 类作为标志。

var shareHeight = $('.related-share-container').height();
$('.related-share-container').css('bottom',-shareHeight);
$(window).scroll(function() {   
     if ($(window).scrollTop() + $(window).height() > $(document).height() - 150) {
         if(!$('.related-share-container').hasClass('done'))
             $('.related-share-container').addClass('done').stop().animate({ bottom: 0 }, 500);
     } else {
         if($('.related-share-container').hasClass('done'))
             $('.related-share-container').removeClass('done').stop().animate({ bottom: -shareHeight }, 500);
     }
});