Javascript jQuery动画循环进度条

我将jQuery脚本用于动画循环进度条。现在，单击“开始”按钮时，进度条就会工作。我希望这个进度条在用户自动滚动到div id“stats”时启动。如何做到这一点

我做了一把小提琴来展示我目前所拥有的：

下面是我正在使用的脚本的链接：

尝试使用

.scrollTop（）

，

.offset（）.top

元素。getBoundingClientRect（）

的

\progress

元素，

.off（）

$（窗口）.on（“滚动”，函数（）{
if（$（“#进度”）[0].getBoundingClientRect（）.top<150）{
$（'.pie_progress'）.asPieProgress（'start'））
$（此）.off（“滚动”）
}
})

---

jsFIDLE

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

步骤1:从顶部获取动态div位置（例如#我的动态div）

---

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

“我希望当用户滚动到div id“stats”时，此进度条会自动启动“没有可滚动的内容出现在”添加了占位符内容，以便页面现在可以滚动

.asPieProgress

没有定义，因为我从GitHub链接加载了脚本，我想是因为它不起作用。更新了它，现在脚本在jsfiddlejavascript部分：请检查更新的代码，我已经在你的fiddle上测试过了&效果很好。我不想点击#按钮(u start)。我希望它在窗口滚动到“进度”时自动启动。“我希望不单击“启动”按钮。我希望它在窗口滚动到“进度”时自动启动。”？你试过JSFIDLE吗？当使用现有的

单击

处理程序滚动到

#progress

时，动画确实开始。您也可以使用

if（$（this.scrollTop（）+20>=$（“#progress”）.offset（）.top）{$（'.pie_progress'）.asPieProgress（'start'）；}

我的要求是，动画启动不需要单击处理程序，而应该在窗口滚动到进度时启动。请将新代码更新到JSFIDLE“if（$（this）.scrollTop（）+20>=$（“#progress”）.offset（）.top）{$（'.pie_progress'）.asPieProgress（'start'）；}”这给了我一个错误“TypeError offset未定义”，JSFIDLE也不能工作。也许我对要求不是很清楚。我刚刚从JSFIDLE中删除了Start按钮，因为我正在寻找的功能不需要单击Start按钮。检查这把小提琴：@AlexZahir查看更新的帖子；将

getBoundingClientRect（）

替换为

.offset（）.top

，

.scrollTop（）

“if（st>350）”。内容将是动态的，因此我们无法设置固定高度。这需要为动态内容自动计算。您需要将其分为两个步骤，1）获取动态div距顶部的距离。2） 一旦你得到了最大值，把这个最大值传递给上面的代码。这就是全部。

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');
});
});

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

    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

flag=true;

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


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