. Warum funktioniert es häufig nicht — die Fehlerfälle

**1. Ein Vorfahr hat `overflow: hidden/auto/scroll`.** Dies ist die Ursache Nr. 1. Sticky-Positionierung wird durch jeden scrollbaren Vorfahr unterbrochen, da das Element relativ zu *diesem* Scroll-Container klebt, nicht zur Seite:

[[CODE_2]]

**2. Das übergeordnete Element ist nicht hoch genug.** Sticky funktioniert nur, wenn das übergeordnete Element höher als das sticky-Element ist — wenn das übergeordnete Element die gleiche Höhe hat, gibt es nichts zu scrollen, es scheint also nie zu kleben.

**3. Kein Schwellwert gesetzt.** Das Vergessen von `top`/`bottom` bedeutet keinen Klebepunkt.

**4. Höhenbeschränkungen für das übergeordnete Element** (z. B. ein flex-Element, das Elemente ausdehnt) können auch den Scrollbereich entfernen.

## Debugging-Checkliste

[[CODE_3]]

## Warum es wichtig ist

`position: sticky` ermöglicht Sticky Headers, Tabellenheader, Seitenleisten und "Scrollspy" UIs ohne JavaScript.

Aber seine Besonderheiten — besonders dass ein `overflow` auf *jedem* Vorfahr es stillschweigend bricht — machen es zu einer häufigen Quelle für "Warum klebt das nicht?" Debugging.

Das Kennen des enthaltenden Block-Umfangs und der Overflow-Falle ist das, was es Ihnen ermöglicht, es zuverlässig zu verwenden.

Question

. Warum funktioniert es häufig nicht — die Fehlerfälle

**1. Ein Vorfahr hat `overflow: hidden/auto/scroll`.** Dies ist die Ursache Nr. 1. Sticky-Positionierung wird durch jeden scrollbaren Vorfahr unterbrochen, da das Element relativ zu *diesem* Scroll-Container klebt, nicht zur Seite:

[[CODE_2]]

**2. Das übergeordnete Element ist nicht hoch genug.** Sticky funktioniert nur, wenn das übergeordnete Element höher als das sticky-Element ist — wenn das übergeordnete Element die gleiche Höhe hat, gibt es nichts zu scrollen, es scheint also nie zu kleben.

**3. Kein Schwellwert gesetzt.** Das Vergessen von `top`/`bottom` bedeutet keinen Klebepunkt.

**4. Höhenbeschränkungen für das übergeordnete Element** (z. B. ein flex-Element, das Elemente ausdehnt) können auch den Scrollbereich entfernen.

## Debugging-Checkliste

[[CODE_3]]

## Warum es wichtig ist

`position: sticky` ermöglicht Sticky Headers, Tabellenheader, Seitenleisten und "Scrollspy" UIs ohne JavaScript.

Aber seine Besonderheiten — besonders dass ein `overflow` auf *jedem* Vorfahr es stillschweigend bricht — machen es zu einer häufigen Quelle für "Warum klebt das nicht?" Debugging.

Das Kennen des enthaltenden Block-Umfangs und der Overflow-Falle ist das, was es Ihnen ermöglicht, es zuverlässig zu verwenden.

Accepted Answer

`position: sticky` λειτουργεί σαν ένα υβρίδιο: ένα στοιχείο συμπεριφέρεται σαν `relative` (παραμένει στη φυσική ροή) **έως ότου** κύλιση προς ένα όριο που ορίζετε, στη συνέχεια συμπεριφέρεται σαν `fixed` (μένει σταθερό) — αλλά μόνο **όσο ο περιεχόμενο του κουτί του** είναι ακόμα στην οθόνη.

```css
.section-header {
  position: sticky;
  top: 0;        /* sticks when its top edge reaches the viewport top */
}
```

Η τιμή `top` (ή `bottom`/`left`/`right`) είναι **απαραίτητη** — ορίζει το όριο. Χωρίς αυτήν, το sticky δεν κάνει τίποτα.

## Το πεδίο εφαρμογής: κολλάει μόνο εντός του γονικού του στοιχείου

Ενα sticky στοιχείο περιορίζεται στο **γονικό του περιέχον**. Κολλάει ενώ κυλάτε *μέσα* από το γονικό στοιχείο, στη συνέχεια κυλάει μακριά μόλις το κάτω μέρος του γονικού περάσει. Αυτό είναι αυτό που κάνει τις "sticky κεφαλίδες ενότητας" να λειτουργούν — κάθε κεφαλίδα κολλάει μόνο ενώ η δική της ενότητα είναι ορατή.

## Γιατί συνήθως "δεν λειτουργεί" — οι περιπτώσεις αποτυχίας

**1. Ένας πρόγονος έχει `overflow: hidden/auto/scroll`.** Αυτό είναι η αιτία #1. Η sticky τοποθέτηση σπάει με οποιονδήποτε κυλόμενο πρόγονο, επειδή το στοιχείο κολλάει σχετικά με *αυτό* το κοντέινερ κύλισης, όχι τη σελίδα:

```css
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
```

**2. Το γονικό στοιχείο δεν είναι αρκετά ψηλό.** Το sticky λειτουργεί μόνο εάν το γονικό στοιχείο είναι ψηλότερο από το sticky στοιχείο — εάν το γονικό έχει το ίδιο ύψος, δεν υπάρχει τίποτα να κυλήσει, επομένως δεν φαίνεται ποτέ να κολλάει.

**3. Κανένα όριο δεν έχει οριστεί.** Η ξέχασμα `top`/`bottom` σημαίνει κανένα σημείο κόλλησης.

**4. Περιορισμοί ύψους στο γονικό στοιχείο** (π.χ. ένα flex γονικό που επεκτείνει τα στοιχεία) μπορούν επίσης να καταργήσουν το χώρο κύλισης.

## Λίστα ελέγχου αποσφαλμάτωσης

```text
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
```

## Γιατί είναι σημαντικό

Το `position: sticky` υποστηρίζει sticky κεφαλίδες, κεφαλίδες πίνακα, πλάγιες γραμμές και "scrollspy" UI χωρίς JavaScript.

Αλλά τα περίεργά του — ειδικά ότι ένα `overflow` σε *οποιονδήποτε* πρόγονο το σπάει σιωπηλά — το κάνουν μια συχνή πηγή αποσφαλμάτωσης "γιατί δεν κολλάει;".

Η γνώση του πεδίου εφαρμογής του περιεχομένου και της παγίδας overflow είναι αυτό που σας επιτρέπει να το χρησιμοποιήσετε αξιόπιστα.