Ich habe eine Site entwickelt und das ziemlich gute jQuery Sticky Kit- Plugin genutzt. Es funktioniert, indem die position
Eigenschaft fixed
bei Bedarf hin und zurück geschaltet wird . Läuft sehr reibungslos auf dem Desktop und akzeptabel auf Mobilgeräten.
Oder zumindest früher. iOS 9 weist ein neues Verhalten auf: Wenn sich das position
Element während der laufenden Bildlaufanimation von static
/ relative
/ absolute
auf ändert, fixed
wird das Element unsichtbar, bis der Bildlauf zum Stillstand gekommen ist. Seltsamerweise ändert sich das Gegenteil (vonfixed
zu was auch immer) ohne Probleme durchgeführt.
Ein funktionierendes Beispiel finden Sie auf der Homepage des Plugins . Die schwarze Navigationsleiste ("Beispielreferenz") soll klebrig sein. Ursprünglich ist es nur static
in der Mitte der Seite positioniert. Wenn Sie nach unten scrollen, wird es fixed
und (in iOS 9) verschwindet, bis der Bildlauf stoppt. Das Verhalten in Desktop-Browsern und iOS 8 ist korrekt.
Ich hatte irgendwie auf die typischen CSS-Problemumgehungen gehofft: Erzwingen einer 3D-Transformation, Deaktivieren der Sichtbarkeit der Rückseite und dergleichen, obskure proprietäre Eigenschaften, ... Aber nichts scheint zu funktionieren.
Werden wir "klebrige" Elemente jetzt ganz vergessen, wo es funktioniert hat?
quelle
position: sticky
in CSS verwenden, allerdings hinter einem Präfix. Sie können Ihr jQuery-Plugin für alles andere behalten und die native CSS-Lösung für iOS verwenden, wo sie unterstützt wird (7+, wenn ich mich recht erinnere).Antworten:
Ich hatte das gleiche Problem und konnte es mit dem alten Trick "3D-Transformation erzwingen" umgehen. Stellen Sie einfach das Element ein, dessen Position Sie ändern möchten, um eine Transformationseigenschaft von zu erhalten
translate3d(0px,0px,0px)
. Stellen Sie sicher, dass dies erfolgt, bevor die Positionseigenschaft geändert wird.quelle
translate3d()
verursachte einige Layoutprobleme für mich,translateZ(0)
arbeitete aber einen Zaubertransform: translateZ(0);
zum Standardelementstil wurde dies behoben, und jetzt erfolgen die Stilübergänge beim Scrollen reibungslos. Wunderbar! Danke an alle! (Getestet in Chrome und Safari auf dem iPad Mini mit iOS 10.0.2)Die einzige Lösung, die ich als richtig befunden habe, war das Deaktivieren von Z-Index-Übersetzungen für direkte untergeordnete Elemente des festen Elements, z.
.is-sticky > * { -webkit-transform: translateZ(0); }
quelle
Ich habe dieses Problem mit einem extra festen Element behoben. Nach einigen Tests fand ich heraus, dass es das erste Element ist, das dieses Problem behebt. Die 2., 3. usw. funktioniert auf iOS-Geräten einwandfrei.
Setzen Sie also direkt nach dem Öffnen Ihres Körpers einen div.fixed-fix:
.fixed-fix { position:fixed; top:-1px; height:1px; width:100%; background:white; }
jetzt funktioniert es! Das Fixed-Fix-Div MUSS eine Hintergrundfarbe haben, da es sonst nicht funktioniert ...
quelle
translate
Option sehrjQuery Sticky Kit und andere ähnliche Plugins, die sogar gut codiert sind, zeigen diese Art von Verhalten unter iOS 9, und es ist nicht das erste Mal, dass so etwas passiert. Der wichtigste Punkt hierbei ist, dass Firefox Safari und Safari Mobile das Experiment unterstützen
position: sticky;
, ebenso wie Google (Chromium). Aufgrund von Integrationsproblemen musste es jedoch vorübergehend deaktiviert werden . Weitere Informationen hierzu finden Sie hier . Ich vermute jedoch, dass sehr baldposition: sticky;
wird Teil der CSS-Spezifikation sein und von allen gängigen Browsern unterstützt werden. Daher denke ich, dass der beste Ansatz zur Lösung dieses Problems darin besteht, eine Polyfüllung anstelle eines Plugins zu verwenden. Natürlich wird eine Polyfüllung nicht alle Merkmale und Funktionen abdecken, die diese Plugins bieten. In vielen Situationen ist die Verwendung einer Polyfüllung jedoch eine robuste und effektive Lösung, die von allen gängigen Browsern unterstützt wird. Meiner Meinung nach ist es vorerst der richtige Weg. Ich persönlich benutze Stickyfill, obwohl ich sicher bin, dass andere Polyfills in freier Wildbahn den Trick machen werden. Alles was ich sagen kann ist, dass ich, seit ich angefangen habe, eine Polyfüllung anstelle von Plugins zu verwenden, keine Probleme mit der Browserkompatibilität hatte.quelle
Fügen Sie dies Ihrem festen Element hinzu.
Verwenden einer Mischung:
@include transform(translate3d(0px,0px,0px))
Verwenden von CSS:
translate3d(0px,0px,0px)
quelle