Sprawdzanie widoczności obiektu podczas przewijania w WordPress za pomocą JavaScript

W niektórych przypadkach warto sprawdzić, czy dany obiekt na stronie został przewinięty poza widoczny obszar ekranu. Poniżej znajdziesz funkcję JavaScript, która pozwala na to sprawdzenie w WordPress.

Kod JavaScript:

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

Wyjaśnienia:

  1. Definicja funkcji i zmiennej timeout: Funkcja czyZescrollowany przyjmuje element jako argument. Definiujemy zmienną timeout do przechowywania identyfikatora opóźnienia oraz zapisujemy początkową pozycję Y elementu.
  2. Sprawdzenie pozycji i nadanie klasy: Funkcja checkPositionAndToggleClass sprawdza aktualną pozycję przewijania i porównuje ją z początkową pozycją elementu, nadając lub usuwając odpowiednią klasę.
  3. Debounce funkcji sprawdzającej pozycję: Funkcja debounceCheckPosition wprowadza opóźnienie w sprawdzaniu pozycji, aby uniknąć zbyt częstego wywoływania.
  4. Nasłuchiwanie przewijania i początkowe sprawdzenie: Dodajemy nasłuchiwanie zdarzenia przewijania i uruchamiamy funkcję sprawdzającą pozycję na starcie.
  5. Użycie funkcji: Używamy funkcji czyZescrollowany z konkretnym elementem, np. document.querySelector('.jakisElement').

Wróć