元素可见时开始动画

Question

无论如何我可以让进度条在屏幕上显示时启动吗？因为现在它们在页面加载后立即启动，即使它们位于页面的下方。当你到达他们时，你可以让他们开始吗？

jsfiddle.net/33ne8j1d /

Answer 1

您可以按如下方式绑定滚动事件：

$(document).bind('scroll', function(ev) {
    var scrollOffset = $(document).scrollTop();
    var containerOffset = $('#pbar').offset().top - window.innerHeight;
    if (scrollOffset > containerOffset) {
      var animate = setInterval(function() {
        loading();
      }, time);
       // unbind event
        $(document).unbind('scroll');
    }
});    

}）;

jsfiddle

Answer 2

您需要将事件侦听器绑定到滚动，然后检查页面的scrollTop是否大于加载程序的offsetTop，如果是，则可以启动动画。我将很快发布一个例子