javascript - jQuery 动画圆形进度条

Question

我正在使用 jQuery 脚本制作动画圆形进度条。现在，当单击开始按钮时，进度条会起作用。我希望这个进度条在用户自动滚动到 div id“stats”时启动。如何做到这一点？

我制作了一个 fiddle 来展示我目前所拥有的:
https://jsfiddle.net/rpkcw236/9/

jQuery(document).ready(function($){
$('.pie_progress').asPieProgress({
    namespace: 'pie_progress',
    barsize: '2',
    trackcolor: '#ececea',
    barcolor: '#e6675f'
});
$('#button_start').on('click', function(){
    $('.pie_progress').asPieProgress('start');
});
$('#button_finish').on('click', function(){
     $('.pie_progress').asPieProgress('finish');
});
$('#button_go').on('click', function(){
     $('.pie_progress').asPieProgress('go',50);
});
$('#button_go_percentage').on('click', function(){
    $('.pie_progress').asPieProgress('go','50%');
});
$('#button_stop').on('click', function(){
    $('.pie_progress').asPieProgress('stop');
});
$('#button_reset').on('click', function(){
    $('.pie_progress').asPieProgress('reset');
});
});

这是我正在使用的脚本的链接:
http://www.jqueryscript.net/loading/Animated-Circle-Progress-Bar-with-jQuery-SVG-asPieProgress.html

Answer 1

您需要将其分为 2 个步骤:1)获取动态div距顶部的距离。2)一旦获得最高值，将此最高值传递给步骤 2 中的代码。

第一步:从顶部获取动态div位置(例如#my-dynamic-div)

    var $output = $('#output');
    $(window).on('scroll', function () {
    var scrollTop     = $(window).scrollTop(),
    elementOffset = $('#my-dynamic-div').offset().top,
    distance      = (elementOffset - scrollTop);
    $output.prepend('<p>' + distance + '</p>');
    });

    OR

    E.G: var distance = $("#MyDiv").offset().top

引用:http://jsfiddle.net/Rxs2m/

第 2 步:在这里传递距离值，而不是硬编码值 350。

flag=true;

$(window).scroll(function() {
st=$(window).scrollTop();
$('#topscroll').html(st)


if(st>350){
    if(flag)
     $('.pie_progress').asPieProgress('start');
    flag=false;
}
});

祝你好运，希望这对你有所帮助。