How to trigger progress bar animation function when specific DOM element is reached on the page?

Question

I am using animated progress bars on my web page but have encountered unexpected problem with the function execution timing. The bars load on page load but ideally I would like to have them do that when certain DOM element on the page is reached. It appears this can be done by using the jQuery scroll event but I am not sue how to approach modifying the code that I am using in order to fit the above requirement. The code used is:

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);

Thanks for your help in advance!