如何让这个javascript函数等到我将x像素滚动到页面下时再使用呢？

Question

努布在这里..。谢谢你的帮忙!

我希望这个函数(有一个动画百分比边框的圆圈)等到我在页面的那个部分开始之前。我只是不知道该把密码放哪儿。

(function($){
    $.fn.percentPie = function(options){

        var settings = $.extend({
            width: 100,
            trackColor: "EEEEEE",
            barColor: "777777",
            barWeight: 30,
            startPercent: 0,
            endPercent: 1,
            fps: 60
        }, options);

        this.css({
            width: settings.width,
            height: settings.width
        });

        var that = this,
            hoverPolice = false,
            canvasWidth = settings.width,
            canvasHeight = canvasWidth,
            id = $('canvas').length,
            canvasElement = $('<canvas id="'+ id +'" width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>'),
            canvas = canvasElement.get(0).getContext("2d"),
            centerX = canvasWidth/2,
            centerY = canvasHeight/2,
            radius = settings.width/2 - settings.barWeight/2;
            counterClockwise = false,
            fps = 2000 / settings.fps,
            update = .01;
            this.angle = settings.startPercent;

        this.drawArc = function(startAngle, percentFilled, color){
            var drawingArc = true;
            canvas.beginPath();
            canvas.arc(centerX, centerY, radius, (Math.PI/180)*(startAngle * 360 - 90), (Math.PI/180)*(percentFilled * 360 - 90), counterClockwise);
            canvas.strokeStyle = color;
            canvas.lineWidth = settings.barWeight;
            canvas.stroke();
            drawingArc = false;
        }

        this.fillChart = function(stop){
            var loop = setInterval(function(){
                hoverPolice = true;
                canvas.clearRect(0, 0, canvasWidth, canvasHeight);

                that.drawArc(0, 360, settings.trackColor);
                that.angle += update;
                that.drawArc(settings.startPercent, that.angle, settings.barColor);

                if(that.angle > stop){
                    clearInterval(loop);
                    hoverPolice = false;
                }
            }, fps);
        }

        this.mouseover(function(){
            if(hoverPolice == false){
                that.angle = settings.startPercent;
                that.fillChart(settings.endPercent);
            }
        });

        this.fillChart(settings.endPercent);
        this.append(canvasElement);
        return this;
    }
}(jQuery));

Answer 1

如果您不介意使用jquery，您可以监听滚动事件并检查页面顶部。

$(window).on('scroll', function() {
    if ($(this).scrollTop() > partOfThePageYourCirclesFire ) {
        // fire cirlces
    }
});