如何使用进度条解决航点问题

Question

当我加载页面时，HTML5进度条attr“ data-percent”不会触发到100％，但是如果我在航路点加载页面，则“ data-percent”将触发到100％。对于这个项目，我正在使用Waypoint和最新版本的bootstrap。任何帮助将不胜感激：）

var $dipper = $('.dipper');
$dipper.waypoint(function () {
    console.log('jkjk');
    $dipper.addClass('op');
    $dipper.attr('data-percent', '100%');
}, {
    offset: '60%'
});


jQuery(document).ready(function () {
    jQuery(".skillbar").each(function () {
        jQuery(this).find(".skillbar-bar").animate({
            width: jQuery(this).attr("data-percent")
        }, 5000);
    });
});

  <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="dipper skillbar clearfix " data-percent="0%">
                        <div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
                        <div class="skillbar-bar" style="background: #e67e22;"></div>
                        <div class="skill-bar-percent">100%</div>
                    </div>
                </div>

我希望如果我加载页面然后滚动到路点，则html5进度栏将触发并上升到给定值100％。