jQuery动画圆形进度条答案

【问题标题】：jQuery animated circular progress barjQuery动画圆形进度条
【发布时间】：2016-03-20 06:20:20
【问题描述】：

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

我做了一个小提琴来展示我到目前为止所拥有的：
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

【问题讨论】：

“我希望这个进度条在用户滚动到 div id "stats" 时自动启动” jsfiddle.net/rpkcw236/7 上没有可滚动的内容？
添加了占位符内容，以便页面现在可以滚动。 jsfiddle.net/rpkcw236/8
.asPieProgress 未定义在 jsfiddle.net/rpkcw236/8
我从 GitHub 链接加载了脚本，我猜是因为它不起作用。更新了它，现在脚本在 JSFIDDLE Javascript 部分中：jsfiddle.net/rpkcw236/9
请检查更新后的代码，我已经在你的小提琴上进行了测试，效果很好。

标签： javascript jquery html css

【解决方案1】：

您需要将其分解为 2 个步骤： 1）获取动态div到顶部的距离。 2) 一旦你获得了最高值，就将这个最高值传递给步骤 2 中的代码。

Step1：从顶部获取动态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;
}
});

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

【讨论】：

"如果 (st>350)"。内容将是动态的，因此我们无法设置固定高度。这需要为动态内容自动计算。
你需要把它分成2个步骤，1）获取动态div到顶部的距离。 2）一旦你获得了最高值，就将这个最高值传递给上面的代码。就是这样。

【解决方案2】：

尝试使用 ~~.scrollTop() , .offset().top~~ Element.getBoundingClientRect() of #progress 元素, .off()

  $(window).on("scroll", function() {
    if ($("#progress")[0].getBoundingClientRect().top < 150) {
      $('.pie_progress').asPieProgress('start')
      $(this).off("scroll")
    }
  })

jsfiddle https://jsfiddle.net/rpkcw236/29/

【讨论】：

我想省略点击#button_start。我希望它在窗口滚动到#progress 时自动启动。
“我想省略点击#button_start。我希望它在窗口滚动到#progress时自动启动。” ?你试过 jsfiddle jsfiddle.net/rpkcw236/10 吗？当使用现有的click 处理程序滚动到#progress 时，动画会开始。您也可以使用if ($(this).scrollTop() + 20 >= $("#progress").offset().top) { $('.pie_progress').asPieProgress('start');}
我的要求是动画开始不需要点击处理程序，它应该在窗口滚动到进度时开始。您能否将新代码更新为 JSFIDDLE "if ($(this).scrollTop() + 20 >= $("#progress").offset().top) { $('.pie_progress') .asPieProgress('start');} "
这给了我一个错误“TypeError Offset is undefined”，并且 JSFIDDLE 也不起作用。也许我对要求还不是很清楚。我刚刚从 JSFIDDLE 中删除了“开始”按钮，因为我正在寻找的功能不需要单击“开始”按钮。检查这个小提琴：jsfiddle.net/rpkcw236/18
@AlexZahir 查看更新后的帖子；用getBoundingClientRect() 替换.offset().top ，.scrollTop()