Absolut positionierte Elemente im Textfluss

[Gunnar Bittersmann]

@@heinetz

Meine Lösung sieht wie folgt aus: Da der IE11 in meiner Browsermatrix steht und ich keinen vernünftig funktionierenden polyfill für IE finden konnte, baue ich den Effekt von display:sticky nach.

Überlegen wir mal gemeinsam, ob das eine gute Idee ist.

Auf was für Systemen läuft noch ein IE 11? Auf neuen, vor Rechenpower nur so protzenden Kisten? Wohl kaum. Eher auf alten langsamen Kleppern.

Was bedeutet display: sticky mit JavaScript nachzubauen? Auf welches Element muss da gelauscht werden? Genau, auf scroll. Wie oft feuert das scroll-Event beim Scrollen? Oft. Sehr oft.

Ist es sinnvoll, auf alten langsamen Systemen viel JavaScript in kurzer Zeit ausführen zu lassen? Na wohl eher nicht.

Das könnte dazu führen, dass das UI beim Scrollen ruckelt. Das ist etwas, was der Nutzer als durchaus störend empfinden wird. Das Anspringen des Lüfters und das Leersaugen des Akkus auch.

Was sie nicht als störend empfindet: Wenn das betreffenden Element nicht sticky ist. (Der IE-Nutzer hat ja gar keinen Vergleich.)

Fazit: Nicht machen. Nicht sticky mit JavaScript nachbauen (oder polyfillen).

Was du tun kannst: Das Ding fixed positionieren und den Platz dafür mit padding freihalten. Den notwendigen Wert mit JavaScript ermitteln (und das bei jedem resize erneut).

Und dafür sorgen, dass das jeweils fokussierte Element nicht hinter dem Ding verborgen ist (aufs focus-Event lauschen und ggfs. in den sichtbaren Bereich rücken).

Ich hab meinen Pen mal beispieltauglich gemacht.

ob ich die Höhe auslese, oder eine fixe Höhe definiere, hängt davon ab, wie gut ich mich mit dem Designer einige 😉

Nein. Wenn es sich um einen Webdesigner handelt, dann wird sie wissen, dass man die benötigte Höhe von Elementen in den seltensten Fällen kennt und „the ebb and flow of things“ akzeptieren muss. [John Allsopp: A Dao of Web Design]

Wenn der Designer auf fester Höhe besteht, dann ist es kein Webdesigner.

LLAP 🖖