I am a newbie at this and this subject probably has been answered. How do I get my Jquery function to begin when the div or class is visible and the function only runs once.
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on('resize scroll', function() {
('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}}
);
});
});
<div id="fico_scroll">
<div id="fico-11"><span class="count">495</span></div>
<div id="fico-2"><span class="count">722</span></div>
<div id="fico-3"><span class="count">608</span></div>
<div id="fico-4"><span class="count">805</span></div>
<div id="fico-5"><span class="count">533</span></div>
<div id="fico-6"><span class="count">685</span></div>
<div style="clear:both"></div>
</div>