向下滚动到Javascript进度条后加载该进度条

我已经将jQuery 1.12.2与animate.css一起使用，它成功地填充了进度条。现在，我试图只在向下滚动到进度条后加载进度条，因为它当前是直接加载的。当它在页面底部某个地方已经加载时，拥有这个很棒的功能有什么意义

我已经创建了一个JSFIDLE。我知道JavaScript有点凌乱，可以用更干净的方式编写，但请原谅，因为我是JS新手，正在尝试先完成这项工作。有人能帮忙吗

$('#myid').goalProgress({
        goalAmount: 100,
        currentAmount: 75,
        textBefore: 'myid ',
        textAfter: ''
    });
});

goalProgress是一个完全不同的类别：

!function($){
$.fn.extend({
    goalProgress: function(options) {
        var defaults = {
            goalAmount: 100,
            currentAmount: 50,
            speed: 1000,
            textBefore: '',
            textAfter: '',
            milestoneNumber: 70,
            milestoneClass: 'almost-full',
            callback: function() {}
        }

        var options = $.extend(defaults, options);
        return this.each(function(){
            var obj = $(this);

            // Collect and sanitize user input
            var goalAmountParsed = parseInt(defaults.goalAmount);
            var currentAmountParsed = parseInt(defaults.currentAmount);

            // Calculate size of the progress bar
            var percentage = (currentAmountParsed / goalAmountParsed) * 100;

            var milestoneNumberClass = (percentage > defaults.milestoneNumber) ? ' ' + defaults.milestoneClass : ''

            // Generate the HTML
            var progressBar = '<div class="progressBar">' + defaults.textBefore + defaults.textAfter + '</div>';

            var progressBarWrapped = '<div class="goalProgress' + milestoneNumberClass + '">' + progressBar + '</div>';

            // Append to the target
            obj.append(progressBarWrapped);

            // Ready
            var rendered = obj.find('div.progressBar');

            // Remove Spaces
            rendered.each(function() {
                $(this).html($(this).text().replace(/\s/g, '&nbsp;'));
            });

            // Animate!
            rendered.animate({width: percentage +'%'}, defaults.speed, defaults.callback);

            if(typeof callback == 'function') {
                callback.call(this)
            }
        });
    }
});
}(window.jQuery);

！函数（$）{
$.fn.extend({
目标进度：功能（选项）{
var默认值={
goalAmount:100，
当前金额：50，
速度：1000，
textBefore:“”，
textAfter:“”，
米莱斯通号码：70，
milestoneClass：“快满了”，
回调：函数（）{}
}
var options=$.extend（默认值，选项）；
返回此值。每个（函数（）{
var obj=$（本）；
//收集并清理用户输入
var goalAmountParsed=parseInt（默认值为.goalAmount）；
var currentAmountParsed=parseInt（默认值为.currentAmount）；
//计算进度条的大小
var百分比=（currentAmountParsed/goalAmountParsed）*100；
var milestoneNumberClass=（百分比>默认值.milestoneNumber）？“”+defaults.milestoneClass：“”
//生成HTML
var progressBar=''+defaults.textBefore+defaults.textAfter+''；
变量progressBarWrapped=''+progressBar+''；
//附加到目标
对象附加（progressBarWrapped）；
//准备好了吗
var rendered=obj.find（'div.progressBar'）；
//删除空格
rendered.each（函数（）{
$（this.html（$（this.text（）.replace（/\s/g'）；
});
//动画！
动画（{width:percentage+'%}，defaults.speed，defaults.callback）；
if（回调类型=='function'）{
callback.call（这个）
}
});
}
});
}（window.jQuery）；

而不是运行此

$('#myid').goalProgress({
        goalAmount: 100,
        currentAmount: 75,
        textBefore: 'myid ',
        textAfter: ''
    });
});

打开

.ready

事件

尝试在

滚动
事件上运行它。
例如，制作一个算法来检查此
#mydiv
是否在您的视口中，然后触发此函数

或者使用一些现成的插件。例如：
而不是运行此

$('#myid').goalProgress({
        goalAmount: 100,
        currentAmount: 75,
        textBefore: 'myid ',
        textAfter: ''
    });
});

打开
.ready
事件

尝试在
滚动
事件上运行它。
例如，制作一个算法来检查此
#mydiv
是否在您的视口中，然后触发此函数

或者使用一些现成的插件。例如：