jQuery動畫循環進度條

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中的代碼。

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

祝你好運，希望這會有幫助。

Answer 2

嘗試使用 .scrollTop() .offset().top #progress元素的Element.getBoundingClientRect() #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/