Как при скролле узнать класс у элемента с помощью javascript?

Question

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

Добрый день.
На странице есть фиксированный элемент.
А также есть чередующейся блоки у который через одного есть класс dark.
Нужно при скролле узнать класс блока, который находится под фиксированным элементом.
Как это сделать?

Я вот написал код, только он работает, если скроллишь страницу с самого верха.

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

			let dark0 = $('.dark-scroll').eq(0);
			let dark0OfsetTop = dark0.offset().top - navigationOffsetTop;
			let dark0height = dark0.innerHeight();

			let dark1 = $('.dark-scroll').eq(1);
			let dark1OfsetTop = dark1.offset().top - navigationOffsetTop;
			let dark1height = dark1.innerHeight();

			let dark2 = $('.dark-scroll').eq(2);
			let dark2OfsetTop = dark2.offset().top - navigationOffsetTop;
			let dark2height = dark2.innerHeight();

			let dark3 = $('.dark-scroll').eq(3);
			let dark3OfsetTop = dark3.offset().top - navigationOffsetTop;
			let dark3height = dark3.innerHeight();

			let dark4 = $('.dark-scroll').eq(4);
			let dark4OfsetTop = dark4.offset().top - navigationOffsetTop;
			let dark4height = dark4.innerHeight();

			let dark5 = $('.dark-scroll').eq(5);
			let dark5OfsetTop = dark5.offset().top - navigationOffsetTop;
			let dark5height = dark5.innerHeight();


			$(document).on('scroll', function () {
				let doc = $(this);
				let docScrollTop = doc.scrollTop();

				if(docScrollTop > dark0OfsetTop && docScrollTop < (dark0height + dark0OfsetTop)){
					if(navigation.hasClass('light')){
						navigation.removeClass('light');
					}
				}else if(docScrollTop > dark1OfsetTop && docScrollTop < (dark1height + dark1OfsetTop)){
					if(navigation.hasClass('light')){
						navigation.removeClass('light');
					}
				}else if(docScrollTop > dark2OfsetTop && docScrollTop < (dark2height + dark2OfsetTop)){
					if(navigation.hasClass('light')){
						navigation.removeClass('light');
					}
				}else if(docScrollTop > dark3OfsetTop && docScrollTop < (dark3height + dark3OfsetTop)){
					if(navigation.hasClass('light')){
						navigation.removeClass('light');
					}
				}else if(docScrollTop > dark4OfsetTop && docScrollTop < (dark4height + dark4OfsetTop)){
					if(navigation.hasClass('light')){
						navigation.removeClass('light');
					}
				}else{
					if(!navigation.hasClass('light')){
						navigation.addClass('light');
					}
				}
			});

		}

Answer 1

[RAX7]

Comments

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

Спасибо вам огромное.

[RAX7]

Сергей Бурдужа, пожалуйста

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

RAX7, Я просто больше с php лажу, с javascript у меня туговато)) Я про это свойство у элемента даже и не знал))

[RAX7]

Сергей Бурдужа, заглядывай сюда https://learn.javascript.ru/coordinates и не такие свойства узнаешь=)

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

RAX7, Спасибо за ссылку, щас прочитаю.
У меня есть к вам небольшой вопрос.
Я сделал красивую кнопку с анимацией, которая срабатываетя через секунду. Кнопка это ссылка.
Как запретить переход по ссылке на 2 секунды?
Заранее спасибо.

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

RAX7, Вот ссылка pizzamania.md
На мобильном, переход происходит сразу.

[RAX7]

Сергей Бурдужа, preventDefault() + setTimeout

<a href="https://google.com" class="link">click</a>

const link = document.querySelector('.link');

link.addEventListener('click', function(event) {
  event.preventDefault();
  const href = this.href;
  setTimeout(() => window.location = href, 2000);
});

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

RAX7, Какой вы красавец))