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

Question

[Максим]

Подскажите пожалуйста, что не так с этим скриптом?

при скролле не добавляется/удаляется класс - 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);

let lastScrollPosition = 0;

function obCallback(payload) {
	const currentScrollPosition = window.pageYOffset;
	const isScrollingUp = currentScrollPosition < lastScrollPosition;

	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');
			if (isScrollingUp) {
				fixedNavbarMobile.classList.add('scroll-up'); // Появится при скролле вверх
			} else {
				fixedNavbarMobile.classList.remove('scroll-up'); // Удалится при скролле вниз
			}
		} else {
			document.querySelector('.header').style.marginBottom = '0';
			fixedNavbarMobile.classList.remove('navbar_fixed');
			fixedNavbarMobile.classList.remove('scroll-up');
		}
	}

	lastScrollPosition = currentScrollPosition;
}

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

Comments

[szQocks]

Параметры ты не указал

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

[szQocks]

Максим, когда тебе нужно вешать класс, когда блок полностью весь виден или когда часть его или вообще когда только только к нему скролишь ?

Интересно, какую чушь

- название параметра - чушь ( payload )

[Максим]

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

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

[szQocks]

Максим, нук попробуй

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

let previousY = 0;
let previousRatio = 0

function obCallback(payload) {
  const currentY = payload[0].boundingClientRect.y;
  const currentRatio = payload[0].intersectionRatio
  const isIntersecting = payload[0].isIntersecting;
  
    if (currentY < previousY && isIntersecting) {
      document.querySelector('.header').style.marginBottom = fixedNavbarMobile.offsetHeight + 'px';
      fixedNavbarMobile.classList.add('navbar_fixed');
      if (currentRatio < previousRatio) {
        fixedNavbarMobile.classList.add('scroll-up'); // Появится при скролле вверх
      } 
    } else if(currentY > previousY && isIntersecting) {
         if(currentRatio > previousRatio){
            fixedNavbarMobile.classList.remove('scroll-up'); 
         }
    }

    previousY = currentY
    previousRatio = currentRatio
}

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

[szQocks]

Максим, ну на счёт document.body это да , тут мой косяк), всё пора спать деточки

[Максим]

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]

Максим, ну высчитывать пиксели экрана тоже как вариант, а так лучше конечно через intersectionRatio как-то отследить, в любом случае удачи а я спать

[Максим]

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

[Максим]

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

[Максим]

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