Как остановить функцию в js при определенном условии?

Question

[nackName]

У меня есть шапка которая при скролле вниз уезжает за пределы видимости, а при скролле вверх выезжает. как мне сделать что бы при ширине 768px шапка была фиксированной?

const headerTop = document.querySelector('.header__top');
const headerSubstrate = document.querySelector('.header__substrate');
let lastScrollTop = 0;

function headerScroll() {
	window.addEventListener('scroll', () => {

		let scrollDistance = window.scrollY;
		if (scrollDistance > lastScrollTop) {
			headerTop.classList.remove('header__top-active');
			headerSubstrate.style.top = '-200px';
		} else {
			headerTop.classList.add('header__top-active');
			headerSubstrate.style.top = '0px';
		}
		lastScrollTop = scrollDistance;
	});
}


const mediaQuery = window.matchMedia('(min-width: 768px)')
if (mediaQuery.matches) {
	headerScroll()
} else {
	
}

Answer 1

[RAX7]

function headerScroll() {
  let headerTop = null;
  let headerSubstrate = null;
  let lastScrollTop = 0;

  function onScroll() {
    let scrollDistance = window.scrollY;

    if (scrollDistance > lastScrollTop) {
      headerTop.classList.remove('header__top-active');
      headerSubstrate.style.top = '-200px';
    } else {
      headerTop.classList.add('header__top-active');
      headerSubstrate.style.top = '0px';
    }

    lastScrollTop = scrollDistance;
  }

  function init() {
    destroy();
    headerTop = document.querySelector('.header__top');
    headerSubstrate = document.querySelector('.header__substrate');
    lastScrollTop = 0;
    window.addEventListener('scroll', onScroll);
  }

  function destroy() {
    window.removeEventListener('scroll', onScroll);
  }

  return { init, destroy };
}

const { init: initStickyHeader, destroy: destroyStickyHeader } = headerScroll();

const mediaQuery = window.matchMedia('(min-width: 768px)');

mediaQuery.addEventListener('change', (event) => {
  if (event.matches) {
    initStickyHeader();
  } else {
    destroyStickyHeader();
  }
});

https://developer.mozilla.org/en-US/docs/Web/API/M...