how to start this JavaScript only when scrolled into view?

I have this javascript code for animating skills bars on my website. My problem is that this animation in started once the page is scrolled down from the very top, so by the time I get to its section, it has already done animated. How do I start its animation only when that section is into view?

jQuery(document).ready(function(){
jQuery('.skillbar').each(function(){
    jQuery(this).find('.skillbar-bar').animate({
        width:jQuery(this).attr('data-percent')
    },6000);
});

});