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 ready或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));
    }
});});

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

2 个答案: