title: How to trigger progress bar animation function when specific DOM element is reached on the page?
body: <p>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:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>Thanks for your help in advance!</p>