引导进度条滚动移动

Question

我有一个默认的引导进度栏

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>

我写了一个jQuery脚本

$(".progress-bar").each(function () {
  $(this).animate( {width: $(this).attr('aria-valuenow') + '%' }, 2000 );
});

仅当进度条位于屏幕视图区域时，才需要运行此脚本。我实际上尝试过此代码，但无法解决

$(window).scroll( function () {
  $(".progress-bar").each(function () {
    var bottom_of_object = $(this).offset().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();
      if( bottom_of_window > bottom_of_object){
        $(this).animate( {width: $(this).attr('aria-valuenow') + '%' }, 2000 );
       }
   });
});

我的问题是什么？我在做什么错，为什么上面的代码不起作用？