Dwa pytania na temat JS - eventy

pytanie zadane 3 stycznia 2018 w HTML i CSS przez Artek Stary wyjadacz (11,800 p.)

1. Co według was jest najlepsze do obsługi JS'em kontrolowania przewijania strony? Konkretnie muszę zrobić tak aby po przewinięciu witryny nieco w dół, menu zostało przyspawane(position: fixed) do czubka strony. Wiem jak to zrobić i to działa już - skorzystałem jednak z

  $(window).scroll(function()

Co może być nieco niesmaczne gdyż odpalane jest zawsze gdy tylko user będzie przewijał stronę no a ja muszę wykonać kod tylko w momencie gdy scroll będzie przekraczał pewną wartość. Po przesunięciu iluśtam pikseli w dół menu jest przyspawane i wracając jest już zwykłe(position: static).

Obiło mi się o uszy parę razy, że są jakieś lepsze metody dlatego postanowiłem zapytać.

2. Co jest lepsze do podpinania eventów? Używać jquery? Czy wystarczy sam addeventListener? Póki co korzystam z jquery ale tylko do podpinania eventów i się zastanawiam czy jest sens importować całą bibliotekę.

3 odpowiedzi

odpowiedź 3 stycznia 2018 przez Comandeer Guru (600,810 p.)

ad. 1) Intersection Observer API

komentarz 3 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

Jest sens używać eksperymentalnych technologi?? Parę przeglądarek nie obsługuje tego . . .

komentarz 3 stycznia 2018 przez Comandeer Guru (600,810 p.)

Więc dla nich fallback do normalnych scroll eventów.

komentarz 3 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

O.K przestudiuję temat i powiem jak wyszło

odpowiedź 3 stycznia 2018 przez ProgramistaStepek Nałogowiec (27,020 p.)

1. Po prostu kontroluj wartość

window.scrollY

i przypinaj i odpinaj odpowiednie klasy CSS po osiągnięciu odpowiednich wartości

2. Bardzo dobrze, że zacząłeś się nad tym zastanawiać. Odpowiedź brzmi: Jeżeli masz zamiar wykorzystać tylko przypinanie zdarzeń z biblioteki, to oczywistym jest, że nie warto pobierać jej całej.

komentarz 3 stycznia 2018 przez UltraSF Stary wyjadacz (11,740 p.)

O właśnie window.scrollY zapomniałem o tym, tak zdecydowanie nie warto :D Jest kanał

Samuraj Programowania na ostatnim odcinku rozwiązuje on podobny problem zobacz sobie :)

komentarz 3 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

Wpadłem na to aby kontrolować przesunięcie strony akurat wykorzystałem

pageYOffset

Ale pytanie czy jest coś lepszego niż wiecznie odpalający się event onscroll

komentarz 3 stycznia 2018 przez ProgramistaStepek Nałogowiec (27,020 p.)

Tego onscroll'a można nieco usprawnić przez użycie funkcji throttle i debounce. Na ten temat już dużo napisano, więc tylko odsyłam do lektury.

Przykładowy link