滾動到它後加載一個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進度條

回答

相關問題