Miesiąc: marzec 2024

Ta funkcja sprawdzi, czy dany element znajduje się powyżej górnej granicy ekranu podczas przewijania strony, i w zależności od tego doda lub usunie klasę zescrollowany. Aby zastosować tę funkcję do konkretnego elementu, wystarczy wywołać czyZescrollowany(document.querySelector('.twojaKlasa')), zastępując .twojaKlasa selektorem CSS dla elementu, który chcesz monitorować.

W tym podejściu, zamiast sprawdzać bieżącą pozycję elementu względem widoku, funkcja porównuje pozycję przewijania okna (window.pageYOffset) z początkową pozycją górnego krawędzi elementu. Jeśli pozycja przewijania przekroczy tę początkową pozycję, element jest traktowany jako „zescrollowany”, co odpowiada Twoim wymaganiom dotyczącym zachowania funkcji niezależnie od zmian w stylu CSS elementu po jego „zescrollowaniu”.

function czyZescrollowany(element) {
  let timeout = null; // Zmienna do przechowywania identyfikatora opóźnienia
  // Zapisanie początkowej pozycji Y elementu
  const initialTopPosition = element.getBoundingClientRect().top + window.pageYOffset;

  const checkPositionAndToggleClass = () => {
    // Aktualna pozycja przewijania
    const currentScrollPosition = window.pageYOffset;

    // Sprawdzenie, czy element jest powyżej górnej granicy ekranu względem jego początkowej pozycji
    if(currentScrollPosition > initialTopPosition) {
      // Nadanie klasy tylko, jeśli element jest "zescrollowany" i nie ma jeszcze klasy 'zescrollowany'
      if (!element.classList.contains('zescrollowany')) {
        element.classList.add('zescrollowany');
      }
    } else {
      // Usunięcie klasy, jeśli element jest poniżej górnej granicy ekranu i ma klasę 'zescrollowany'
      if (element.classList.contains('zescrollowany')) {
        element.classList.remove('zescrollowany');
      }
    }
  };

  const debounceCheckPosition = () => {
    // Czyszczenie poprzedniego opóźnienia, jeśli istnieje
    if (timeout !== null) {
      clearTimeout(timeout);
    }
    // Ustawienie opóźnienia dla funkcji sprawdzającej pozycję
    timeout = setTimeout(checkPositionAndToggleClass, 100); // Opóźnienie 100ms
  };

  // Nasłuchiwanie przewijania okna i uruchomienie funkcji z opóźnieniem
  window.addEventListener('scroll', debounceCheckPosition);
  
  // Wywołanie funkcji na starcie, aby od razu ustawić poprawny stan klasy
  debounceCheckPosition();
}

// Użycie funkcji z konkretnym elementem, np. document.querySelector('.jakisElement')
// czyZescrollowany(document.querySelector('.jakisElement'));