スクロールした後にJavascriptのプログレスバーをロード

Question

jQuery 1.12.2をanimate.cssとともに使用して、プログレスバーを正常に埋め込みました。現在、進行中のバーを下にスクロールした後にのみロードしようとしていますが、現在はすぐにロードされています。ページの一番下にあるときに既に読み込まれているときに、この素​​晴らしい機能を持つことのポイントは何ですか？

私は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); 

Answer 1

代わり.readyイベント

でこの

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

を実行しているのscrollイベントでそれを実行してみてください。 たとえば、この#mydivがビューポート内にあるかどうかをチェックし、この機能をトリガするアルゴリズムを作成します。

または、準備が整ったプラグインを使用してください。例：http://scrollmagic.io/