仅在滚动到时才开始动画

Question

我有此技能吧HTML：

<div id="skills">
  <div class="col-lg-6">
    <div class="skillbar clearfix " data-percent="50%">
      <div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
      <div class="skillbar-bar" style="background: #e67e22;"></div>
      <div class="skill-bar-percent">50%</div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="55%">
      <div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span></div>
      <div class="skillbar-bar" style="background: #3498db;"></div>
      <div class="skill-bar-percent">25%</div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="50%">
      <div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span></div>
      <div class="skillbar-bar" style="background: #2c3e50;"></div>
      <div class="skill-bar-percent">50%</div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="40%">
      <div class="skillbar-title" style="background: #46465e;"><span>PHP</span></div>
      <div class="skillbar-bar" style="background: #5a68a5;"></div>
      <div class="skill-bar-percent">40%</div>
    </div>
    <!-- End Skill Bar -->
  </div>
  <!-- end of column 1 -->
  <div class="col-lg-6">
    <div class="skillbar clearfix " data-percent="75%">
      <div class="skillbar-title" style="background: #333333;"><span>Wordpress</span></div>
      <div class="skillbar-bar" style="background: #525252;"></div>
      <div class="skill-bar-percent">75%</div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="100%">
      <div class="skillbar-title" style="background: #27ae60;"><span>SEO</span></div>
      <div class="skillbar-bar" style="background: #2ecc71;"></div>
      <div class="skill-bar-percent">100%</div>
    </div>
    <!-- End Skill Bar -->
    <div class="skillbar clearfix " data-percent="70%">
      <div class="skillbar-title" style="background: #124e8c;"><span>Photoshop</span></div>
      <div class="skillbar-bar" style="background: #4288d0;"></div>
      <div class="skill-bar-percent">70%</div>
    </div>
    <!-- End Skill Bar -->
  </div>
  <!-- end of column 2 -->
</div>

这个JavaScript：

var offsetTop = $('#skills').offset().top;
$(window).scroll(function() {
  var height = $(window).height();
  if ($(window).scrollTop() + height > offsetTop) {
    jQuery('.skillbar').each(function() {
      jQuery(this).find('.skillbar-bar').animate({
        width: jQuery(this).attr('data-percent')
      }, 2000);
    });
  }
});

我的问题是，只要页面从顶部一直向下滚动，此处的动画就会开始。

我希望它能够一直等到到达其部分，然后动画才能开始。尝试了很多事情，它们对我不起作用。希望有人可以帮助我解决这个问题。