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：

在这里，我使用doneclass作为标志。

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);
     }
});