Javascript 如何使用航路点激活滚动上的进度条？

我想在滚动条上激活我的进度条，并使用waypoints.js。但是它不工作，进度条要么在我滚动之前“填满”，要么在滚动和页面加载时保持“空”

html:

js:

---

这里有几件事需要注意

首先，让我们从航路点的偏移选项开始：默认情况下，当元素顶部撞击窗口顶部时，会触发航路点。偏移指定这些顶部位置之间的触发距离。 在您的示例中，需要注意的是，“技能”部分固定在窗口的顶部，这意味着当偏移量>=0时，它会在页面加载时立即触发，并且只在“向下”方向触发一次。 其次，为了显示进度条的进度，必须设置进度条的宽度，而不是可见性/显示。另外，应该通过width而不是max width属性来设置宽度，因为这是运行css动画所必需的。 因此，解决方案如下：

$('#skills').waypoint(function(direction) {
    if (direction === 'down') {
        $('.progress-bar').width(function(){
            // this here refers to individual .progress-bar items
            return $(this).data('score');
        });
    }
}, { offset: '10%' });

$('#skills').waypoint(function(direction) {
    if (direction === 'up') {
        $('.progress-bar').width(0);
    }
}, { offset: '100vh' });

HTML

SCSS

工作示例也可以在上使用

更新评论的答案： 如果希望每次用户向下滚动时都显示动画，但同时不显示进度条的递减动画，则可以按如下方式更改代码：

$('#skills').waypoint(function(direction) {
    if (direction === 'down') {
        $('.progress-bar').width(function(){
            // this here refers to individual .progress-bar items
            return $(this).data('score');
        });
    }
}, { offset: '10%' });

$('#skills').waypoint(function(direction) {
    if (direction === 'up') {
        $('.progress-bar').width(0);
    }
}, { offset: '100vh' });

上面的代码仍然运行“减少”动画，但如果不是在iframe（如在小提琴中）中运行，则当技能离开视口时触发该动画时，该动画将不可见。在这种情况下，也可以使用可见性类。

---

为了更好地展示功能，我还设置了页边空白：100vh；关于这方面的技能。

非常感谢，它非常有效。你能告诉我，我怎样才能使在向上滚动时，条保持“填充”，动画只在向下滚动时发生-而不是在向上滚动时返回0？很高兴提供帮助。如果你想让这些条保持打开状态，那么你只需要删除javascript中的else语句。起初我尝试过这样做，但后来发生的是，这些条在向下滚动时也不会“重新加载”。所以它们只被触发一次，我希望它们总是在向下滚动时被触发，而在向上滚动时被触发。我还试图更改偏移量，以便每次向下和向上滚动时仍会触发偏移量，但在向上滚动时不再可见，但这不起作用。@javascript2016也更新了此问题的答案。

$('#skills').waypoint(function(direction) {
    if (direction === 'down') {
        $('.progress-bar').addClass("show");
    } else {
        $('.progress-bar').removeClass("show");
    }
}, {
    offset: '50%'
});

<div class="progress">
    <!-- CHANGE style="max-width: 60%" TO data-score="60%" -->
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-score="60%"></div>
</div>

$('#skills').waypoint(function(direction) {
    if (direction === 'down') {
        $('.progress-bar').width(function(){
            // this here refers to individual .progress-bar items
            return $(this).data('score');
        });
    } else {
        $('.progress-bar').width(0);
    }
}, { offset: '10%' });

#skills {
  margin-top: 100px;
  /* …the rest is the same… */
}

$('#skills').waypoint(function(direction) {
    if (direction === 'down') {
        $('.progress-bar').width(function(){
            // this here refers to individual .progress-bar items
            return $(this).data('score');
        });
    }
}, { offset: '10%' });

$('#skills').waypoint(function(direction) {
    if (direction === 'up') {
        $('.progress-bar').width(0);
    }
}, { offset: '100vh' });