在特定的 div javascript 上开始加载栏答案

【问题标题】：Start loading bar on specific div javascript在特定的 div javascript 上开始加载栏
【发布时间】：2015-04-10 23:35:33
【问题描述】：

我在特定的 div 中有加载栏，即距页面顶部 700 像素。用于加载栏的 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;
}

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

要添加@Syahrul 的答案，这里是一个工作示例：a working example

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

【讨论】：

【解决方案2】：

不要在 DOM 就绪或 onload 事件上加载它，而是应该在它到达特定 div 时加载它。

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

【讨论】：

你能给我举个例子吗？我不知道如何在我的代码中做到这一点。