Reakcja na scrollowanie strony poprzez dodanie klasy do body

Często zdarza się, że menu nawigacyjne lub inne elementy strony zmieniają swój wygląd podczas przewijania strony. Aby to osiągnąć, można użyć prostego skryptu JavaScript. Dodaje on klasę .zescrollowana-strona do elementu body po przewinięciu strony o więcej niż np. 150 pikseli.

Przykładowy kod javascript:

// Funkcja debouncing
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

// Funkcja obsługująca przewijanie strony
function handleScroll() {
  if (window.scrollY > 150) {
    document.body.classList.add('zescrollowana-strona');
  } else {
    document.body.classList.remove('zescrollowana-strona');
  }
}

// Dodanie obsługi przewijania z debouncingiem
const debouncedHandleScroll = debounce(handleScroll, 100);
window.addEventListener('scroll', debouncedHandleScroll);

CSS:

#element{
   /* reguły gdy na górze strony */
}
body.zescrollowana-strona #element{
  /* reguły podczas zescrollowania  */
}

CSS:

Przydatne Linki

Wróć