serii81
@serii81
Я люблю phр...

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

Доброе утро.
На сайте есть секции, которые чередуются, с темным и светлым фоном. У секции с темным фоном задан класс 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');
			}
		});
	});
}

Заранее благодарен за подсказку.
  • Вопрос задан
  • 44 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Ibishka
Сделай условие если элемент находится у секции при скроле узнай клас и изходя из класса задай клас элементе. Все элементарно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы