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

Load a Javascript progress bar after scrolling down to it

本文关键字:加载 滚动 Javascript      更新时间:2023-09-26

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

我在这里创建了一个JSFiddle。我知道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);

不运行此

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

关于.ready事件

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

或者使用一些现成的插件。例如:http://scrollmagic.io/