Как узнать направление прокрутки при срабатывании события?

Vefolio, Если правильно сделал, то не работет (

const target = document.querySelector('.main');
const element = document.querySelector('.navbar');
const observer = new IntersectionObserver(callback);


function callback(entries) {
	entries.forEach(entry => {
		if (entry.isIntersecting) {
			// Проверяем, находится ли элемент в зоне видимости
			if (entry.boundingClientRect.top < entry.rootBounds.top) {
				// Элемент прокручивается вверх
				element.classList.add('scroll-up');
			} else {
				// Элемент прокручивается вниз
				element.classList.remove('scroll-up');
			}
		}
	});
}
observer.observe(target);
observer.unobserve(target);

Скрыть / показать заголовок при прокрутке вниз / вверх, используя чистый JavaScript с IntersectionObserver

Все мы знаем https://wicky.nillia.ms/headroom.js/, который является отличным виджетом для отображения / скрытия заголовка при прокрутке вниз / вверх. Я бы использовал этот виджет, но мои случаи использования немного отличаются.

Я пытаюсь построить это сейчас с IntersectionObserver.

Как узнать направление прокрутки при срабатывании события?

Спасибо за ответ. Но меня интересует решение с Observer

Как узнать направление прокрутки при срабатывании события?

Не понимаю, что в моем вопросе вам не понятно?

Как узнать направление прокрутки при срабатывании события?

Зачем писать в ответ бесполезные слова? Комментируйте

Как узнать направление прокрутки при срабатывании события?

Вот так скрипт был изначально:

// Scrolling down/up
    if (currentY < previousY) {
      if (currentRatio > previousRatio && isIntersecting) {
        state.textContent ="Scrolling down enter"
      } else {
        state.textContent ="Scrolling down leave"
      }
    } else if (currentY > previousY && isIntersecting) {
      if (currentRatio < previousRatio) {
        state.textContent ="Scrolling up leave"
      } else {
        state.textContent ="Scrolling up enter"
      }
    }

текст появлялся при верхнем и нижнем вхождении, в зависимости от направления прокрутки

Как узнать направление прокрутки при срабатывании события?

Спасибо! Очень помогли..

Не могу разобраться, при скролле не добавляется/удаляется класс. Что не так?

szQocks, Интересно очень по intersectionRatio. Если будет время, рад буду помощи.

Не могу разобраться, при скролле не добавляется/удаляется класс. Что не так?

szQocks, Ошибку выдает
Uncaught ReferenceError: entry is not defined
obCallback - const currentRatio = entry.intersectionRatio
IntersectionCallback*

Не могу разобраться, при скролле не добавляется/удаляется класс. Что не так?

szQocks, Спасибо за помощь!!

Не могу разобраться, при скролле не добавляется/удаляется класс. Что не так?

szQocks, Сделал перестановку кода
Так работает как хотел я:

При ширине экрана больше 992 пикс. добавляется и удаляется 'navbar_fixed' при прохождении obFixedNavbar.observe(targetNavbarDesktop);

При ширине экрана меньше 992 пикс. добавляется 'navbar_fixed' при прохождении obFixedNavbar.observe(targetNavbarMobile);
дальше скролл вниз, класс 'scroll-up' не добавляется,
вверх добавляется до obFixedNavbar.observe(targetNavbarMobile);
потом 'navbar_fixed' и 'scroll-up' удаляются

const targetNavbarDesktop = document.querySelector('.fixed-navbar-desktop');
const targetNavbarMobile = document.querySelector('.fixed-navbar-mobile');
const fixedNavbarDesktop = document.querySelector('.navbar');
const fixedNavbarMobile = document.querySelector('.navbar');
const obFixedNavbar = new IntersectionObserver(obCallback);

function obCallback(payload) {
	let prevScrollpos = 0;

	if (document.documentElement.clientWidth > 992) {
		if (payload[0].boundingClientRect.y < 0) {
			document.querySelector('.header').style.marginBottom = fixedNavbarDesktop.offsetHeight + 'px';
			fixedNavbarDesktop.classList.add('navbar_fixed');
		} else {
			fixedNavbarDesktop.classList.remove('navbar_fixed');
			document.querySelector('.header').style.marginBottom = '0';
		}
	} else {
		if (payload[0].boundingClientRect.y < 0) {
			document.querySelector('.header').style.marginBottom = fixedNavbarMobile.offsetHeight + 'px';
			fixedNavbarMobile.classList.add('navbar_fixed');
			window.addEventListener('scroll', function () {
				let currentScrollpos = window.pageYOffset;
				if (currentScrollpos < prevScrollpos) {
					fixedNavbarMobile.classList.add('scroll-up');
				} else {
					fixedNavbarMobile.classList.remove('scroll-up');
				}
				prevScrollpos = currentScrollpos;
			})
		} else {
			document.querySelector('.header').style.marginBottom = '0';
			fixedNavbarMobile.classList.remove('navbar_fixed');
			fixedNavbarMobile.classList.remove('scroll-up');
		}
	}
}

if (document.documentElement.clientWidth > 992) {
	obFixedNavbar.observe(targetNavbarDesktop);
} else {
	obFixedNavbar.observe(targetNavbarMobile);
};

Ваш код тоже сейчас проверю

Не могу разобраться, при скролле не добавляется/удаляется класс. Что не так?

szQocks, Так совсем ничего не добавляется

const obFixedNavbar = new IntersectionObserver(obCallback, 
{     
root: document.body,
rootMargin: '300px',
threshold: 0.5
});

Как объединить два javaскрипта?

Модератор, Спасибо за поправку. Учту в дальнейшем

Как объединить два javaскрипта?

В любом случае, спасибо за помощь!!

Как объединить два javaскрипта?

Алексей Дубровин, Я так понял, что по моему вопросу, вы помочь не сможете
В любом случае, спасибо за помощь!!

Как объединить два javaскрипта?

Интересно как же

Как объединить два javaскрипта?

А задача такая. На десктопе блок .fixedNavbar становится фиксированным после .targetNavbarDesktop
Меньше 992 - блок .fixedNavbar прячется\показывается. Но наблюдатель другой .targetNavbarMobile

Как объединить два javaскрипта?

Алексей Дубровин,
Да, но при разрешении меньше 992 хочу добавить в скрипт событие при скролле
Когда пройдет пересечение элемента "targetNavbarMobile" при скролле, класс "class3" не добавится к ".fixedNavbar"
А вверх добавится. Но до элемента "targetNavbarMobile", после класс "class3" удалится

как-то так

Как объединить два javaскрипта?

Алексей Дубровин, вроде того

Как добавить/удалить class после прокрутки?

Valeriu Cuțebov, Да, помогло! Спасибо!

Как добавить/удалить class после прокрутки?

Valeriu Cuțebov, Теперь новая проблема :(

Теперь класс добавляется сразу после прокрутки, а не тогда как скроется блок "header__section-info"
может из-за этого:

var sectionInfo = document.querySelector('.header__section-info').getBoundingClientRect().top + window.pageYOffset;

Работало когда было так:

var sectionInfo = document.querySelector('.header__section-info').offsetHeight;