Смещение путевой точки - в этом случае не работает
У меня смещение на 50% в коде путевой точки, но оно срабатывает, когда div попадает в верхнюю часть браузера, по сравнению с 50%. Я относительно новичок в путевых точках, так что я надеюсь, что кто-то может увидеть, где я ошибся.
ЦЕЛЬ Переключение классов (.blue |.red) на элементах div, когда они достигают 50%, зависит от того, прокручиваете ли вы вверх или вниз (в настоящее время это работает, за исключением стрельбы на 50).
ПРОБЛЕМА Классы переключаются только после того, как они достигли вершины 0% против 50%.
LIVE DEMO 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>