Сравнить переменную (положение прокрутки) с отдельными числами в массиве jQuery - PullRequest
Новая
       12

Сравнить переменную (положение прокрутки) с отдельными числами в массиве jQuery

1 голос
/ 15 января 2020

У меня есть массив (это позиции смещения неизвестного количества элементов на странице). Я хочу иметь возможность добавлять / удалять классы, когда пользователи прокручивают это число пикселей на странице вниз. 

var offsetPositions = [200,500,700,1000,1100,1500];

$(window).scroll(function(){
  var scrolled  = $(window).scrollTop();
});

Дело в том, что позиции смещения в массиве - это позиции верхнего и нижнего смещения. Таким образом, используя приведенный выше пример, вершина первого элемента составляет 200 пикселей, а нижняя - 500 пикселей. У следующего есть вершина в 700px и низ в 1000px. Так что они попарно, и их всегда будет четное число.

Мне нужен эффект, когда позиция прокрутки достигает 1,3,5,7 элементов в массиве и выключается, когда она достигает 2 4,6,8 и др. c. Примерно так: 

if (scrolled > 200) {
 // add class
}

if (scrolled > 500) {
 // remove class
}

if (scrolled > 700) {
 // add class
}

if (scrolled > 1000) {
 // remove class
}

Конечный результат, являющийся классом, существует только при прокрутке элементов, а не в промежутках между ними.

Я не могу понять, как добавить для l oop для массива внутри функции прокрутки, чтобы дать мне то, что мне нужно. Я также подумывал разбить массив на шансы и четности, но попытка сравнить два массива так, как я хочу, была более сложной. Я просто ищу предложения о том, как с ним go, или я пропускаю что-то очевидное.

Ответы [ 2 ]

0 голосов
/ 15 января 2020

Определить, добавить или удалить класс по индексу массива

Если индекс четный, добавить класс

Если индекс нечетный, удалить класс 

var offsetPositions = [200,500,700,1000,1100,1500];

$(window).scroll(function(){
  var scrolled  = $(window).scrollTop();
  offsetPositions.forEach((v,i)=>{
    if(i%2 == 0 && scrolled > v){
      //Add class
    }else if(scrolled > v){
      //Remove class
    }

  });
});
0 голосов
/ 15 января 2020

Вы можете попробовать этот способ для достижения этого (используя двумерный массив в JavaScript) 

var offsetPositions = [[200,500],[700,1000],[1100,1500]];
offsetPositions.forEach(pairs => {
  if(scrolled > pairs[0]) // add class
  if(scrolled > pairs[1]) // // remove class
}); 


var offsetPositions = [[200,500],[700,1000],[1100,1500]];


$(window).scroll(function(){
  var scrolled  = $(window).scrollTop();
  var index = 0;
  offsetPositions.forEach(pairs => {
    if(scrolled > pairs[0]) console.log("Add class" + index);
    if(scrolled > pairs[1]) console.log("Remove class" + index);
    index += 1;
  }); 
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="height: 2000px; overflow-y:scroll;" id="demo">

<div style="height: 200px; background-color:red">height 200</div>

<div style="height: 300px; background-color:green">height 300</div>


<div style="height: 200px; background-color:blue">height 200</div>


<div style="height: 300px; background-color:orange">height 300</div>

</div>
...