如何在页面上到达特定DOM元素时触发进度条动画功能？

Question

我在网页上使用了动画进度条但遇到了功能执行时间的意外问题。栏加载页面加载，但理想情况下，我希望他们在页面上的某些DOM元素到达时执行此操作。看来这可以通过使用jQuery滚动事件来完成，但我不会起诉如何修改我正在使用的代码以符合上述要求。使用的代码是：

function setBarWidth(dataElement, barElement, cssProperty, barPercent) {
  var listData = [];
  $(dataElement).each(function() {
    listData.push($(this).html());
  });
  var listMax = Math.max.apply(Math, listData);
  $(barElement).each(function(index) {
    $(this).css(cssProperty, (listData[index] / listMax) * barPercent + "%");
  });
}
setBarWidth(".style-1 span", ".style-1 em", "width", 100);

提前感谢您的帮助！