Как поменять цвет элемента при скролле страницы?

Question

[Сергей Бурдужа]

Доброе утро.
На сайте есть секции, которые чередуются, с темным и светлым фоном. У секции с темным фоном задан класс dark-scroll.
Также есть блок с мини меню. Ему я задал id="js-navigation". Цвета у этого блока темные, но если задать класс light, то они становятся светлыми. Я к тому, что, когда блок с меню находится на темном фоне, ему нужно задать класс light.

При скролле страницы, в зависимости от цвета секции, нужно задать или убрать у блока с меню класс light.

Я написал этот механизм, но он оказался костыльным, потому что я привязывался к конкретному блоку и высчитывал offset().top и innerHeight.
Вот мой старый код:

$(document).on('scroll', function () {
		if (
			(navigation.offset().top > reimbursabile.offset().top && navigation.offset().top < (reimbursabile.offset().top + reimbursabile.innerHeight())) ||
			(navigation.offset().top > history.offset().top && navigation.offset().top < (history.offset().top + history.innerHeight())) ||
			(navigation.offset().top > partners.offset().top && navigation.offset().top < (partners.offset().top + partners.innerHeight())) ||
			(navigation.offset().top > consultation.offset().top && navigation.offset().top < (consultation.offset().top + consultation.innerHeight()))
		) {
			if (!navigation.hasClass('light')) {
				navigation.addClass('light');
			}
		} else {
			navigation.removeClass('light');
		}

		if (
			(navigation.offset().top > reimbursabile.offset().top && navigation.offset().top < (reimbursabile.offset().top + reimbursabile.innerHeight()))
		) {
			let iranbursabileA = $('#js-navigation a[href="#js-reimbursabile"]');
			if (!iranbursabileA.hasClass('active')) {
				iranbursabileA.addClass('active');
				iranbursabileA.parent().addClass('active');
			}
			iranbursabileA.addClass('active');
		} else if ((navigation.offset().top > history.offset().top && navigation.offset().top < (history.offset().top + history.innerHeight()))) {
			let iranbursabileA = $('#js-navigation a[href="#js-history"]');
			if (!iranbursabileA.hasClass('active')) {
				iranbursabileA.addClass('active');
				iranbursabileA.parent().addClass('active');
			}
			iranbursabileA.addClass('active');
		} else if ((navigation.offset().top > contacts.offset().top && navigation.offset().top < (contacts.offset().top + contacts.innerHeight()))) {
			let iranbursabileA = $('#js-navigation a[href="#js-footer"]');
			if (!iranbursabileA.hasClass('active')) {
				iranbursabileA.addClass('active');
				iranbursabileA.parent().addClass('active');
			}
			iranbursabileA.addClass('active');
		} else {
			$('#js-navigation a').removeClass('active');
			$('#js-navigation a').parent().removeClass('active');
		}


	});

Только если поменять секции местами, то такой код уже не работает.

Я начал писать универсальный код, только не могу правильно описать логику.

if($('body').hasClass('page-template-front-page')){
	let navigation = $('#js-navigation');

	$('.dark-scroll').each(function () {
		let $this = $(this);

		$(document).on('scroll', function () {
			console.log('scrollTop: '+$(this).scrollTop());
			console.log('offsetTop: '+$this.offset().top);
			if($(this).scrollTop() > $this.offset().top && $(this).scrollTop() < ($this.offset().top + $this.innerHeight)) {
				if(navigation.hasClass('light')){
					navigation.removeClass('light');
				}
			}else{
				navigation.addClass('light');
			}
		});
	});
}

Заранее благодарен за подсказку.

Comments

[Сергей Бурдужа]

Работает, но, только для одного блока

$('.dark-scroll').each(function (index) {
	let elemItem = $(this);
	let elemOffsetTop = elemItem.offset().top - navigationOffsetTop;
	let elemHeight = elemOffsetTop + elemItem.innerHeight();


	if (index === 0) {
		$(document).on('scroll', function () {
			if ($(this).scrollTop() > elemOffsetTop && $(this).scrollTop() < (elemHeight - navigationOffsetTop)) {
				console.log('in');
				if (navigation.hasClass('light')) {
					navigation.removeClass('light');
				}
			} else {
				console.log('out');
				if (!navigation.hasClass('light')) {
					navigation.addClass('light');
				}
			}
		});
	}
});

[vasiiil]

Сделал немного по другому. Но по вашей логике блоки всегда будут светлыми и при скролле верхние будут становиться темными. Вот пример: https://jsfiddle.net/f8z9hvy3/

Answer 1

[Ibishka]

Сделай условие если элемент находится у секции при скроле узнай клас и изходя из класса задай клас элементе. Все элементарно.

Comments

[Сергей Бурдужа]

Доброе утро. Извините, что вчера не написал, был немного занят.
А вы могли бы написать немного кода?