Hallo Siegfried,

es ist so, dass ein sticky-Element nur so lange kleben bleibt, bis sich die Seiten von sticky und Scrollcontainer auf der Seite, die der Klebeseite gegenüber liegt, berühren.

In deinem Fall ist es so, dass Du zwar ein breites Element drin hast, das macht aber den Body nicht so breit wie sein Inhalt ist. Der Body ist nach wie vor so breit wie das Fenster. Das p.lang ist ebenfalls nicht breiter. Trotzdem siehst Du einen Scrollbar und kannst die Seite scrollen, aber du scrollst nicht den Inhalt des body, sondern das Root-Element (html), d.h. du scrollst den gesamten Scrollcontainer und das hebelt sticky aus.

Damit ist das gewünschte sticky-Element so breit wie der Body, d.h. die gegenüberliegenden Seiten berühren sich von Anfang an und sobald Du den body scrollst, ist die Stickyness vorbei.

So ganz ist mir das aber auch nicht einsichtig. Hier spielen mehrere potenzielle Scrollcontainer zusammen, und hinzu kommt die Eigenschaft von Blockelementen, so breit zu werden wie ihr Elternelement, sowie die Eigenschaft des Body, so breit zu werden wie das Fenster. Es mit sticky sauber hinzubekommen, ist mir zwar gelungen, aber nur durch massiven Einsatz von width-Angaben. Sobald die Seite umfangreicher wird, dürfte das ins Chaos abdriften.

Mein Vorschlag, nur das p.lang Element mit einem horizontalen Scrollbar zu versehen, ist da deutlich einfacher und vor allem robuster.

Rolf