Sticky Navigation Verzögerung auf Bildlauf

Question

Dies ist die Website, an der ich arbeite: Click here - Home Page Scroll Issue.

Ich benutze Foundation 5, eine klebrige Scrollbar und Owl Carousel (Ich habe versucht mit Slick Karussell und das Ergebnis ist das gleiche).

Das Problem, das ich erfahre ist, dass, wenn ich scrolle nach oben/unten und die obere Leiste über das Karussell geht, stottert die ganze Seite und die Scroll-Bumps und stoppt kürzer als seine erwartete Flugbahn.

Ich habe viele Lösungen einschließlich der Anwendung von z-index und -webkit-transform: translateZ(0) Regeln auf das Karussell ohne Erfolg versucht.

Dieses Problem scheint nicht in Firefox oder Edge zu existieren oder ist zumindest nicht so offensichtlich.

Irgendwelche Ideen?

** Update, Ajay Varghese's Antwort scheint für das Scrollen nach unten zu helfen, aber das Problem besteht immer noch beim Scrollen nach oben. Wenn Sie die nächste Inhaltszeile duplizieren, um die Länge der Seite zu erhöhen, wenn Sie versuchen, nach oben zu scrollen, um das Karussell freizulegen, springt es und erzeugt ein Scroll-Stottern. Dieses Problem ist sehr ärgerlich und ich kann immer noch nicht die Ursache finden.

Answer 1

Dieses Problem besteht nur in Chrome. Das Problem scheint zu sein, dass WebKit manchmal nicht gut mit Layering umgehen kann.

Hier ist die Lösung, die perfekt für mich gearbeitet: body { -webkit-transform: translate3d(0, 0, 0);}

Hope this jemand hilft und rettet ihre kostbare Zeit.

** UPDATE, ich habe nicht bemerkt, dass dies die Sticky Topbar bricht. Daher ist diese Lösung nicht möglich.

Answer 2

Versuch von overflow: hidden; in .fixed Klasse Zugabe

.fixed { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 99; 
    overflow: hidden; 
    left: 0; 
} 

Answer 3

Ich habe nicht genau verstehen, wie das Problem geschieht. Aber ich habe etwas versucht und das Problem gelöst. Das Springen passiert nicht, nachdem ich den Randbereich entfernt habe, den Sie für den Hauptinhalt angegeben haben. Dadurch bleibt das Karussell in der Hauptinhaltsbox, die wir nicht haben wollen. Ich löste es, indem ich etwas mehr Höhe gab und Karussell nach unten drückte, indem ich "Position: relativ" und "oben: 15px" gab. Können Sie das versuchen und mich wissen lassen?