Как установить флаг в таком условии?

Question

[Анна Бакурова]

Вообщем на скролле у меня висит функция в которой цикл и условие

for(var i=0; i<arr.length; i++){

    if($window.scrollTop() >= arr[i]){

        block.find('li').eq(i).addClass('active')
        .siblings().removeClass('active');
				
     }
}

Дело в том что в масиве arr[] лежат все расположения блоков относительно верха, то есть он имеет вид arr[ 200, 1325, 3844, 4941, ... ]

Мне необходимо при скролле проверять какой блок у нас "активный" (который последний проскроллился). Если мы проскролили страницу до 1000 то он выдаст блок 1 если до 4500 то выдаст блок 3 и т д. С проблемой Я сталкнулась тогда, когда решила повесить флаг (проверку не менялся ли блок) и вот уже вижу с вечера не могу придумать как этот кусок переписать... Сейчас условие исполняется при каждом изменении позиции в не зависимости поменятся акстивный блок или нет. У кого какие идеи как это переписать или дополнить.

Answer 1

[Евгений Петров]

Информацию об объекте лучше хранить в нём же самом. Для этого используем data() (это не совсем одно и то же, что dataset). То есть все найденные позиции мы сохранили data('position', 'найденное_значение'). Цикл по уже когда-то найденной коллекции LI.

Куда же сохранить флаг об изменении элемента?)) Я думаю, вы уже догадались — например, data('changed', true).

var li = block.find('li'); //Нашли только 1 раз

$(window).on('scroll', function (e) {
	var scrollTop = $window.scrollTop(); //Вычислили только 1 раз

	li.each(function () {
		var $item = $(this);

		if($item.data('position') >= scrollTop){
			$item.addClass('active');
		} else {
			$item.removeClass('active');
		}
	});
});

Вы производите много абсолютно лишних действий:
— постоянно определяете прокрутку (надо только 1 раз)
— постоянно находите LI в цикле (надо только 1 раз)
— в каждой итерации пробегаете по всем найденным LI, меняя класс им всем (итого на круг выходит LI в квадрате)

Comments

[Анна Бакурова]

Что такое arr[i] в Вшем коде?

[Анна Бакурова]

может тогда function (i), а не function ()

[Евгений Петров]

@Libris scrollTop, конечно же. Поправил.

[Анна Бакурова]

@Petroveg ok а эту часть кода как понять .data('position')? имеется в виду добавление атрибута типа data- к элементу?

[Евгений Петров]

@Libris
.data('position') — получить
.data('position', true) — установить в true (можно использовать любой тип данных)

[Анна Бакурова]

@Petroveg кое как переписала код) То просто была маленькая часть...