iPad scroll - Header wird nur dann auf "fixed" gesetzt, wenn der Bildlauf endet
Ich setze meine Heldeneinheit auf Position, nachdem sie in ihre Position gescrollt hat. Für die ersten 70px der Seite scrollt die Heldeneinheit mit dem Rest, bis die Spitze die Heldeneinheit erreicht, die dann repariert werden muss.
Nicht behoben
Behoben
Dies funktioniert überall und auch auf dem ipad, außer dass die Position nach dem Scrollen fest eingestellt ist und nicht während des Scrollens wie im Browser.
Ich weiß, das liegt daran, dass das Scroll-Ereignis während des Moment-Scrollings nicht ausgelöst wird. Ich habe versucht, dies mit dem folgenden Code zu beheben, aber es hat nicht funktioniert:
%Vor%Was ich erreichen möchte, ist, dass die Heldeneinheit auf "fix" gesetzt werden kann, während die Schriftrolle noch beschäftigt ist. Wenn jemand eine Verbesserung oder eine Alternative vorschlagen kann, würde ich mich sehr freuen, weil ich gerade feststecke.
4 Antworten
Das war in der Vergangenheit ein großes Problem für mich. Es gibt ein paar Problemumgehungen, die funktionieren, aber im Allgemeinen brechen sie die Erfahrung für andere Browser / Geräte.
Diese Art funktioniert auf iOS-Safari, aber es wird aufhören, auf Desktop und vielen anderen mobilen Browsern zu arbeiten.
%Vor%Es gibt Ein toller Artikel hier , der die Vorteile und Vorteile aufzeigt Nachteile von 3 oder 4 verschiedenen Work-arounds für dieses Problem. Aber - leider - keine wirkliche Schlussfolgerung.
TL; DR - Nein, es gibt keine feste Lösung dafür, aber es gibt Workarounds, die helfen können.
Wie von toni gezeigt, gibt es ein Problem bei Touchstart / Event, das erst nach dem Ende des Scrolls ausgelöst wird. Sie können versuchen, den Offset vom Anfang der Seite des Elements innerhalb eines
zu verwenden %Vor%um zu überprüfen, wo sich Ihr Element in Bezug auf den oberen Rand der Seite befindet
Angenommen, deine Heldeneinheit hat id="hero-unit" , dann kannst du ihre Position ändern, indem du einen Listener verwendest, der seine Entfernung vom oberen Bildschirmrand überprüft:
Tags und Links javascript html jquery css ipad