js Zrób gładki zwój

Question

Poważnie mam pytanie dotyczące zdarzenia przewijania. Próbowałem rozwiązać to przez całą noc, ale nie mogłem.

Próbuję trzymać nawigację na górze. Efekt stick zostanie przetworzony, gdy $(window).scrollTop() przejdzie przez punkt tuż przed nawigacją.

Problem polega na tym, że w IE i Chrome wystąpi efekt "mrugnięcia" (podobny do opóźnienia), ale nie w przeglądarce Firefox.

Podczas moich badań wiedziałem, że Firefox domyślnie ma "płynne przewijanie".

Jednakże należy zaznaczyć to na przykład Chrome lub IE

http://www.backslash.gr/demos/jquery-sticky-navigation/

To jest tak gładka jak na Firefox, a kod jest po prostu takie proste ......

punktu czy robię dokładnie to samo, co ten przykład, ale dlaczego mam efekt "mrugnięcia"?

Czy sztuczka na CSS?

Czy istnieje sposób, aby utworzyć gładką scrool jak to, co na firefox przez js?

Dziękuję bardzo za pomoc.

$(window).on('scroll', Sticky); 

function Sticky(){ 
    $(this).scrollTop() > anchor.offset().top 
    ? nav.css({ 'position': 'fixed', 
         'z-index': z_index, 
         top: y, 
         left: x, }) 
    : nav.css({ 'position': 'static', }); 
}; 

Answer 1

Patrząc na niepełnej przykład kodu jest to naprawdę trudne do określenia, co się dzieje, więc prosimy o zaktualizowanie pytanie z kompletnym kodem, albo lepiej - przesłać JSFiddle służyć nam jako przykład i możemy bezpośrednio aktualizować z koniecznymi zmianami. Do tej pory (w oparciu o to, co powiedziałem wcześniej) wygląda dostajesz flickering skutku z powodu literówek w przykładowym kodem:

? nav.css({ 'position': 'fixed', 
        'z-index': z_index, 
        top: y, 
        left: x, }) 
: nav.css({ 'position': 'static', }); 

gdzie jesteś nie kończące wachlarz właściwości CSS i wartości to musi być zastosowane (kończycie go przecinkiem ,) i nie zamknęliście niektórych właściwości CSS w jednym cytacie '. Kod powinien być:

? nav.css({ 'position': 'fixed', 
        'z-index': z_index, 
        'top': y, 
        'left': x }) 
: nav.css({ 'position': 'static' }); 

To oczywiście pod warunkiem, że już ustawić zmienne z_index, y i x wcześniej.

EDIT & ZASTRZEŻENIE: Utworzyłem nowy JSFiddle z oryginalnego kodu demo. Prezentowane przez Ciebie demo jest chronione prawami autorskimi, więc prosimy o wdzięczność oryginalnemu autorowi, a nie mnie, jeśli to ci pomoże. Kod, który opublikowałem JSFiddle, jest dostępny do bezpłatnego pobrania. Sądzę, że jest to w porządku, aby ponownie użyć go do celów demonstracyjnych. Zmień ten kod, aby był zgodny z Twoimi wymaganiami i zaktualizuj go do nowej wersji w każdym kroku, w którym go zaktualizujesz. Pomoże Ci śledzić, gdzie robisz coś złego (jeśli w ogóle). ;)

Answer 2

Myślę, że możesz pomylić dwie rzeczy tutaj.

1. patrząc na działający kod, do którego jesteś podłączony. tam jest mrugnięcie, jeśli przewiniesz na chromie lub IE lub firefoxie za pomocą myszki scroller.
2. Miganie jest spowodowane nagłą zmianą pozycji. Spróbuj zmienić js, aby animował pozycję, a nie nagle zmieniał jej wartość.

Jak powiedzieli inni, połączenie z działającym kodem i oczekiwanie odpowiedzi przez pokazanie podstępu może nie pomóc nam wszystkim. Spróbuj dodać animację na linii zmiany pozycji js i sprawdź, czy to pomaga.

Tu nie ma żadnej sztuczki. Wszystko w kodzie, więc przeczytaj źródło i ciesz się.