HTML: Warum hält "sticky" nicht perfekt?
Ich habe drei div-Elemente von diesem Aufbau:
A)
<div position:sticky; top=0px><table>Zwei Zeilen, mehrere Spalten</table></div>
B)
<div position:sticky; top=50px><table>Zwei Zeilen, mehrere Spalten</table></div>
C)
<div><table>mehrere tausend Zeilen, 'eine' Spalte</table></div>
Wenn ich nun im Element "C" zu scrollen beginne, ist zunächst alles wie gewünscht. A und B bewegen sich nicht.
Aber wenn jene Zeile, die nach dem Laden nicht zu sehen war (erste Zeile der zweiten Bildschirmseite), am Element "B" ankommt, beginnt sich dieses ebenfalls nach oben zu verschieben (zunächst hinter "A", z-index).
Kommt nun auch diese Zeile (der zweiten Bildschirmseite) am Element "A" an, verschiebt sich diese ebenfalls und es ist nur noch das Element "C" zu sehen.
Was kann ich tun, damit auch beim Scrollen A, B permanent zu sehen ist, selbst dann, wenn schon viele Bildschirmseiten gescrollt wurden?
natürlich steht überall: style="position:sticky;top:0px;"dabei
1 Antwort
Sollte eigentlich gehen. Voraussetzung natürlich, dass kein Fehler auftrat (in der Konsole zu sehen).
Schau dir die Elemente mal einzeln an.
Beachte auch, dass das "sticky"-Element am nächstem Vorfahren klebt der scrollbar ist.
Dann versuch es mal in einem anderem Browser. Online kannst du ja sehen, wie es aussehen soll.
Im Prinzip bewegt sich das Element beim scrollen mit, bis es an den oberen Rand stößt. Dort bleibt es dann hängen.
Firefox, Edge, Chrome, Opera..alle der gleiche Effekt.
Ich werde es nochmal ganz isoliert als Übung mit
DIV oder P: Sticky
DIV oder P: Sticky
DIV oder P: Scrollbar
aufbauen. Mal sehen ob fruchtet.
Hm, okay. Du könntest auch mal das ganze auf JFiddle hochladen, dann könnten es sich auch andere anschauen und testen.
Danke. Ich habe inzwischen viele Varianten durch. Immer noch der gleichen Effekt. Sobald, die "erste" Zeile der 2ten Seite ankommt, verschiebt sie alles.
Verändere ich durch WebZoom die Anzahl der sichtbaren Zeilen, wirkt sich dieses Verhalten analog auf die 'neue' letzte Zeile aus.
Ich habe auch script Lösungen gefunden, die ich vermeiden wollte. Mal sehen ob dies dann klappt.