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