Forum PHP.pl > [jQuery] scrollTop animate

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [jQuery] scrollTop animate - menu

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

koryx

16.07.2015, 11:46:29

Witam
Chciałem zrobić menu, które zmienia swój wygląd w zależności od pozycji strony. Gdy dam poniższy kod wszystko działa ok.

Kod

$(document).ready(function() {
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
                   $("#menu-box").css("background-color", "rgba(0,0,0,0.5)");
        } else {
                   $("#menu-box").css("background-color", "");
        }
    });

});

jednak chciałbym wprowadzić małą animację, zrobiłem więc tak:

Kod

$(document).ready(function() {
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
                 $("#menu-box").css("background-color", "rgba(0,0,0,0.5)");
                 $("#menu-box").animate({ top: "0px" },  { duration:300 });
        } else {
                 $("#menu-box").css("background-color", "");
                $("#menu-box").animate({ top: "20px" },  { duration:300 });
        }
    });

});

Pod chrome działa to w miarę poprawnie (występuje lekkie opóźnienie animacji) ale w firefoxie opóźnienie animacji robi się bardzo duże (nawet kilka sekund). Próbowałem zmienić $(window) na $('html', body') ale to nie rozwązywało problemu.

kafowi

16.07.2015, 11:57:32

Nie widzę żadnych opóźnień:
- http://jsfiddle.net/kafowi/7ptcs8rn/

koryx

16.07.2015, 17:59:29

https://jsfiddle.net/7ptcs8rn/1/

dodalem styl tak jak jest u mnie:

Kod

i wg tego co widze jest opoznienie animacji (nie zmiany koloru tla a pzesuniecia diva)

trueblue

16.07.2015, 19:02:25

Przekazałeś parametr duration w obiekcie, a co za tym idzie obowiązuje wartość domyślna dla parametru queue.
Twoja animacja przy każdym przesunięciu scrolla "kolejkuje się". Ustaw wartość [i]queue[/i] na false i będzie ok.

kafowi

16.07.2015, 19:05:00

- https://jsfiddle.net/kafowi/7ptcs8rn/3/

koryx

16.07.2015, 19:30:55

Oba sposoby (queue: false lub switchclass) rozwiązują problem. Dziękuję

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.