Начать загрузку бара на конкретном div javascript

Question

У меня есть панель загрузки в конкретном div, то есть 700px в верхней части страницы. JavaScript для загрузочной панели работает нормально, но запускается на стартовой странице, и когда я добираюсь до определенного div, панель уже загружена, то я хочу начать загрузку, когда я дойду до этого div. Пожалуйста помоги.

JavaScript:

<script> 

$('.numberprogress[data-percentage]').each(function() { 
    var progress = $(this); 
    var percentage = Math.ceil($(this).attr('data-percentage')); 
    $({countNum: 0}).animate({countNum: percentage}, { 
    duration: 5000, 
    easing:'linear', 
    step: function() { 
     // What todo on every count 
    var pct = ''; 
    if(percentage == 0){ 
     pct = Math.floor(this.countNum) + '%'; 
    }else{ 
     pct = Math.floor(this.countNum+1) + '%'; 
    } 
    progress.text(pct) && progress.siblings().children().css('width',pct); 
    } 
    }); 
}); 
</script> 

HTML:

<div class="middle> 
<div class="progress"><div class="numberprogress" data-percentage="80"></div> 
<div class="progressbar"><div class="progresspercent"></div></div></div> 
</div> 

CSS:

.progress{ 
    float:left; 
    width:300px; 
    height:50px; 
    color:#FFF; 
    background-color:#38B1CC; 
    margin-top:5px; 
    border-radius:4px; 
    font-family: sans-serif; 
    text-align:center; 
    font-size:0.8em; 
} 

.numberprogress{ 
    float:left; 
    height:18px; 
    width:18%; 
    color:white; 
    font-size:14px; 
    text-align:center; 
    background: rgba(0,0,0,0.13); 
    padding: 9px 0px; 
    border-radius:4px; 
    margin:5px; 
} 

.progressbar{ 
    margin-left:0px; 
    float:right; 
    border-radius:10px; 
    margin:5px; 
    height:10px; 
    width:75%; 
    background: rgba(0,0,0,0.13); 
    margin-top:18px; 
    overflow: hidden; 
} 

.progresspercent{ 
    height:100%; 
    float:left; 
    background-color:white; 
    border-radius:10px; 
} 
.middle{ 
    height:600px; 
    width:auto; 
    font-family:Bizon; 
} 

Answer 1

Вместо загрузки его на DOM готовы или OnLoad событие, вы должны загрузить его, когда он достигнет, что конкретный div.

if ($(document).scrollTop() >= $('.target-div').offset().top) { 
Your function 
} 

Answer 2

Чтобы добавить на @Syahrul ответ, вот рабочий пример: a working example

$(document).scroll(function() {  
$('.numberprogress[data-percentage]').each(function() {   
    if ($(document).scrollTop() >= $(this).offset().top) { 
     animateProgress($(this)); 
    } 
});});