title: Start loading bar on specific div javascript
body: <p>I have loading bar in specific div, that is 700px from top of the page. JavaScript for loading bar is working fine, but it is triggered at the start page, and when I reach to specific div, bar is already loaded, what I want is to start loading when I reach to that div. Please, help.</p>
  
  <p>JavaScript:</p>
  
  <pre><code>&lt;script&gt;
  
  $('.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) &amp;&amp; progress.siblings().children().css('width',pct);
      }
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="middle&gt;
  &lt;div class="progress"&gt;&lt;div class="numberprogress" data-percentage="80"&gt;&lt;/div&gt;
  &lt;div class="progressbar"&gt;&lt;div class="progresspercent"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>