Question

我正在使用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

Answer 1

您需要将其分解为两个步骤： 1）从顶部获取动态div的距离。 2）获得最高值后，将此顶部值传递给step2中的代码。

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

祝你好运＆amp;希望这有帮助。

Answer 2

尝试使用valid_email()元素的{strike> .scrollTop()，.offset().top Element.getBoundingClientRect()，#progress

.off()

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

jQuery动画循环进度条

2 个答案: