Podmiana klasy przy odpowiednim przesunięciu okna (Jquery)

Witam, w ramach ćwiczeń chciałem zrobić stronkę na której po przewinięciu do x pixeli zmieniało się tło. Klasa kolor ma w sobie ustawiony kolor tła na czerwony. W body jest żółty.
Poszperalem w necie i znalazłem takie rozwiązanie:

$(window).scroll(function() {
            var height = $(window).scrollTop();

            if(height  > 500) {
                $("body").toggleClass("kolor");
            };
        });

Działa, lecz przy każdym poruszeniu scrollem wywołuje się ta funckja i jest efekt przełączania się między ustawionym tłem a tłem z body.
Złą funkcję znalazłem? Z tego co rozumiem wnioskuję, że za każym poruszeniem scrolla sprawdzana jest pozycja i jesli jest większa od 500 to dodawana jest klasa z tłem?

Jak to rozwiązać? Przechodzenie między kolorami ma być płynne. Docelowo zamiast kolorów mają być obrazki.

Kod robi dokładnie to, co mu kazałeś: co przesunięcie viewportu, jeśli jest on dalej niż 500px od góry, klasa kolor jest przełączana (toggle).

Ty raczej szukałbyś czegoś w ten deseń:

if (height > 500) {
  $("body").addClass("kolor");
} else {
  $("body").removeClass("kolor");
}

Które z kolei można uprościć do:

$("body").toggleClass("kolor", height > 500);

Btw, dlaczego nazwałeś w ten sposób zmienną height? Nie reprezentuje ona przecież żadnej wysokości, tylko pozycję.

Na temat odpowiadaj w postach.

Ten uproszczony kod coś mi nie działa.

Jak rozumiem - mam się domyślić co się takiego (nie)dzieje? :-)

Faktycznie, mógłbym wstawić kod :P
Właśnie znalazłem błąd, brakowało domknięcią nawiasu, niestety brackets to nie CodeBlocks i nie wywala błędów :D

Swoją drogą widziałem kiedyś stronę, na której gdy się scrollowało był taki efekt:
-sam obrazek
-teraz przy scroolowaniu co jakiś czas pokazywała się na nim litera napisu.

Zastanawiam się jak to jest zrobione?
Jakiś plugin? Albo obrazki o jednakowej szerokości, każdy odpowiednio z 1, potem dwoma literami, oraz przeźroczystym tłem aż do końa napisu. Wypozycjonowany div z obrazkiem + sticky ? Potem po prostu obrazek jest podmieniany? Ciekawa sprawa jak wiele rzeczy można wykonać w tym jquery.

Zastanawiam się jak to jest zrobione?

Nie wiem, zapytaj autora strony.

Ciekawa sprawa jak wiele rzeczy można wykonać w tym jquery.

Jesteś świadom, że jQuery nie ma nic do tego i tak naprawdę to wszystko pod spodem jest zwyczajny JavaScript, prawda? ;-)

Tak tak, ale dużo mniej pisania i ogólnie według mnie bardziej czytelny kod. getElementById vs $ mówi samo za siebie :P

https://github.com/KonradSudol/Scroll_effect

Nie znam jeszcze dobrze Gita, ani nie jestem zadnym grafikiem, ale efekt działa ;D