我的航点代码上有50％的偏移量，但是当div到达浏览器顶部时，它似乎正在触发，而50％时偏移。我对航路点比较陌生，所以我希望有人可以看到我的错误所在。
目标 根据您是向上滚动还是向下滚动（当当前触发值为50时除外），将div项目上的类（.blue | .red）切换为50％。
问题 只有在达到最高0％和50％的水平后，课程才会切换。
实时演示 https://stable.stable-demos.com/what-we-do/（该部分位于页面的中间）
注意 除非您正在查看检查器或控制台日志，否则很难看到类的切换，因为它们只会在0％触发。
如果您知道是什么原因，请提前谢谢。
jQuery(function($){
// Create a new waypoint
var continuousElements = document.getElementsByClassName('waypoint')
for (var i = 0; i < continuousElements.length; i++) {
new Waypoint({
element: continuousElements[i],
handler: function(direction) {
if (direction === 'down') {
console.log(this.element.innerHTML + 'hit-down');
$(this.element).addClass('red');
$(this.element).removeClass('blue');
} else if (direction === 'up') {
console.log(this.element.innerHTML + 'hit-up');
$(this.element).addClass('blue');
$(this.element).removeClass('red');
}
}
}, { offset: '50%' });
}
}); // End jQuery.list-wrap {
min-height: 2000px;
}
.red {
color: red!important;
}
.blue {
color: blue!important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<div id="listWrap" class="list-wrap">
<div class="continuous-true waypoint">We Think.</div>
<div class="continuous-true waypoint">We Research.</div>
<div class="continuous-true waypoint">We Involve.</div>
<div class="continuous-true waypoint">We Stragegize.</div>
<div class="continuous-true waypoint">We Plan.</div>
<div class="continuous-true waypoint">We Analyze.</div>
<div class="continuous-true waypoint">We Ideate.</div>
<div class="continuous-true waypoint">We Design.</div>
<div class="continuous-true waypoint">We Create.</div>
<div class="continuous-true waypoint">We Test.</div>
<div class="continuous-true waypoint">We Adapt.</div>
<div class="continuous-true waypoint">We Execute.</div>
<div class="continuous-true waypoint">We Report.</div>
<div class="continuous-true waypoint">We Learn.</div>
<div class="continuous-true waypoint">We Improve.</div>
</div>