Javascript 滚动显示多个动画

我正试图使我的网站上的进度条动画滚动。所以我设法得到了一个进度条来在滚动条上设置动画。我现在的问题是，我有多个进度条来设置动画（危险、警告、成功）等等。我必须创建新元素吗？这是小提琴：

//检查元素是否在视口中
函数IsElementViewPort（elem）{
变量$elem=$（elem）；
//获取页面的滚动位置。
var scrollem=（（navigator.userAgent.toLowerCase（）.indexOf（'webkit'）！=-1）？'body'：'html'）；
var viewportTop=$（scrolllem.scrollTop（）；
var viewportBottom=viewportTop+$（window）.height（）；
//获取元素在页面上的位置。
var elemTop=Math.round（$elem.offset（）.top）；
var elemBottom=elemTop+$elem.height（）；
返回（（elemTopviewportTop））；
}
//检查是否是开始动画的时间。
函数检查动画（elem）{
变量$elem=$（elem）；
if（$elem.hasClass（'start'））返回；
如果（IsElementViewPort（$elem））{
$elem.addClass（'start'）；
//动画进度条
变量栏=$（“.进度栏警告”）；
$（函数（）{
$（条形）。每个（函数（）{
bar_width=$（this.attr（'aria-valuenow'）；
$（此）.width（条形图宽度+'%'）；
});
});
}
}
//捕获滚动事件
$（窗口）。滚动（函数（）{
选中动画（$（'.progress bar'）；
});

---

你们知道如何使所有的进度条在滚动条上动画化吗？

对你们的函数做了一些修改，现在我们开始：

  // Check if elem is in viewport
  function isElementInViewport(elem) {
      var $elem = elem;

      // Get the scroll position of the page.
      var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
      var viewportTop = $(scrollElem).scrollTop();
      var viewportBottom = viewportTop + $(window).height();

      // Get the position of the element on the page.
      var elemTop = Math.round($elem.offset().top);
      var elemBottom = elemTop + $elem.height();

      return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
  }

  // Check if it's time to start the animation.
  function checkAnimation(elem) {
      var $elem = elem;
      if ($elem.hasClass('start')) return;
      if (isElementInViewport($elem)) {
          $elem.addClass('start');

          //animated progess bars
                  bar_width = $elem.attr('aria-valuenow');
                  $elem.css('width',bar_width + '%');
      }
  }


  // Capture scroll events
  $(window).scroll(function () {
      $('.progress-bar').each(function(){
          checkAnimation($(this));
      });
  });

//检查元素是否在视口中
函数IsElementViewPort（elem）{
var$elem=elem；
//获取页面的滚动位置。
var scrollem=（（navigator.userAgent.toLowerCase（）.indexOf（'webkit'）！=-1）？'body'：'html'）；
var viewportTop=$（scrolllem.scrollTop（）；
var viewportBottom=viewportTop+$（window）.height（）；
//获取元素在页面上的位置。
var elemTop=Math.round（$elem.offset（）.top）；
var elemBottom=elemTop+$elem.height（）；
返回（（elemTopviewportTop））；
}
//检查是否是开始动画的时间。
函数检查动画（elem）{
var$elem=elem；
if（$elem.hasClass（'start'））返回；
如果（IsElementViewPort（$elem））{
$elem.addClass（'start'）；
//动画进度条
条形宽度=$elem.attr（'aria-valuenow'）；
$elem.css（'width'，bar_width+'%'）；
}
}
//捕获滚动事件
$（窗口）。滚动（函数（）{
$（'.progress bar'）。每个（函数（）{
选中动画（$（this））；
});
});

  // Check if elem is in viewport
  function isElementInViewport(elem) {
      var $elem = elem;

      // Get the scroll position of the page.
      var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
      var viewportTop = $(scrollElem).scrollTop();
      var viewportBottom = viewportTop + $(window).height();

      // Get the position of the element on the page.
      var elemTop = Math.round($elem.offset().top);
      var elemBottom = elemTop + $elem.height();

      return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
  }

  // Check if it's time to start the animation.
  function checkAnimation(elem) {
      var $elem = elem;
      if ($elem.hasClass('start')) return;
      if (isElementInViewport($elem)) {
          $elem.addClass('start');

          //animated progess bars
                  bar_width = $elem.attr('aria-valuenow');
                  $elem.css('width',bar_width + '%');
      }
  }


  // Capture scroll events
  $(window).scroll(function () {
      $('.progress-bar').each(function(){
          checkAnimation($(this));
      });
  });