Sticky-Kacheln: Pathfinder Demo

Kachel 1

Morgens

  1. 01Scroll hoch — diese Zeile wird an der Kopf-Unterkante hart abgeschnitten.
  2. 02Kein Durchscheinen, keine weiche Kante.
  3. 03Der Inhalt verschwindet wirklich — und fliegt dabei auch aus Tab-Order und Screenreader.
  4. 04Gleich schiebt „Abends" diese Kategorie raus.

Abends

  1. 05„Abends" klebt jetzt direkt unter dem Kachelkopf.
  2. 06Moderne Browser: Topbar transparent, Kante compositor-dicht. Fallback: Frosted Glass maskiert den Ein-Frame-Lag.
  3. 07Harte Grenze an der Kachel.
  4. 08Danach rückt Kachel 2 nach.

Kachel 2

Drinnen

  1. 01Zwei Kategorien, harte Grenze — gleiches Verhalten.
  2. 02Zeilen enden sauber an der Kopfkante.
  3. 03Die runde Ecke bleibt rund.
  4. 04Lange Tokens brechen um statt zu überlaufen: https://beispiel.de/sehr/lange/pfade/ohne/leerzeichen/artikel-8837-B

Draußen

  1. 05„Draußen" übernimmt den Andockplatz.
  2. 06Nichts läuft aus der Kachel.
  3. 07Noch eine Zeile.
  4. 08Ende der Kachel.

Kachel 3

Am Wasser

  1. 01Dritte Kachel, selbes Prinzip.
  2. 02Kategorie eins hält oben.
  3. 03Zeilen werden hart gekappt.
  4. 04Gleich kommt die Bergluft.

In den Bergen

  1. 05Umgeschaltet auf Kategorie zwei.
  2. 06Der Übergang bleibt in der Kachel.
  3. 07Fast fertig.
  4. 08Kachel 4 wartet schon.

Kachel 4

Einpacken

  1. 01Letzte Kachel.
  2. 02Erste Kategorie dockt an.
  3. 03Harte Grenze via schlankem Scroll-Handler.
  4. 04Andocken selbst bleibt reines CSS.

Ankommen

  1. 05Zweite Kategorie übernimmt.
  2. 06Beliebig auf echte Inhalte übertragbar — jetzt ohne 4-Kacheln-Limit.
  3. 07Fertig.
  4. 08Am Scroll-Ende bleibt dieser Kopf sauber angedockt stehen.