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');
			}
		});
	});
}

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

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

Войти через центр авторизации
Похожие вопросы
Admitad Projects Москва
от 130 000 до 200 000 ₽
Fundraise Up Санкт-Петербург
от 2 500 до 3 500 $
28 мая 2020, в 01:17
1000 руб./в час
27 мая 2020, в 23:51
3000 руб./за проект