滚动到它后加载一个Javascript进度条

我用jQuery 1.12.2和animate.css成功地填充了一个进度条。现在，我试图只在我向下滚动到当前加载后立即加载进度条。当它在页面底部的某个地方被加载时，拥有这个真棒功能有什么意义？滚动到它后加载一个Javascript进度条

我创建了一个JSFiddle here。我知道JavaScript有点杂乱，可以用更清晰的方式编写，但请原谅我，因为我是JS的新手，并试图首先完成这项工作。谁能帮忙？

$('#myid').goalProgress({ 
     goalAmount: 100, 
     currentAmount: 75, 
     textBefore: 'myid ', 
     textAfter: '' 
    }); 
});

goalProgress是一个完全不同的类：

!function($){ 
$.fn.extend({ 
    goalProgress: function(options) { 
     var defaults = { 
      goalAmount: 100, 
      currentAmount: 50, 
      speed: 1000, 
      textBefore: '', 
      textAfter: '', 
      milestoneNumber: 70, 
      milestoneClass: 'almost-full', 
      callback: function() {} 
     } 

     var options = $.extend(defaults, options); 
     return this.each(function(){ 
      var obj = $(this); 

      // Collect and sanitize user input 
      var goalAmountParsed = parseInt(defaults.goalAmount); 
      var currentAmountParsed = parseInt(defaults.currentAmount); 

      // Calculate size of the progress bar 
      var percentage = (currentAmountParsed/goalAmountParsed) * 100; 

      var milestoneNumberClass = (percentage > defaults.milestoneNumber) ? ' ' + defaults.milestoneClass : '' 

      // Generate the HTML 
      var progressBar = '<div class="progressBar">' + defaults.textBefore + defaults.textAfter + '</div>'; 

      var progressBarWrapped = '<div class="goalProgress' + milestoneNumberClass + '">' + progressBar + '</div>'; 

      // Append to the target 
      obj.append(progressBarWrapped); 

      // Ready 
      var rendered = obj.find('div.progressBar'); 

      // Remove Spaces 
      rendered.each(function() { 
       $(this).html($(this).text().replace(/\s/g, '&nbsp;')); 
      }); 

      // Animate! 
      rendered.animate({width: percentage +'%'}, defaults.speed, defaults.callback); 

      if(typeof callback == 'function') { 
       callback.call(this) 
      } 
     }); 
    } 
}); 
}(window.jQuery);

来源

2016-04-29 Mohammed

而是对.ready事件

尝试在scroll事件运行运行此

$('#myid').goalProgress({ 
     goalAmount: 100, 
     currentAmount: 75, 
     textBefore: 'myid ', 
     textAfter: '' 
    }); 
});

。例如，制定算法来检查此#mydiv是否在您的视口中，然后触发此功能。

或者使用一些准备好的插件。例如：http://scrollmagic.io/

来源

2016-04-29 20:33:47 Robert

滚动到它后加载一个Javascript进度条

回答

相关问题