Смещение путевой точки - в этом случае не работает - PullRequest
Новая
       38

Смещение путевой точки - в этом случае не работает

0 голосов
/ 02 мая 2019

У меня смещение кода путевой точки на 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>
...