Zápis vypadá takhle: <h2 style="position: -webkit-sticky; position: sticky; top: 0px;">Sticky prvek v divu</h2>
Další odstavce s nějakým Lorem ipsum.
Další odstavce s nějakým Lorem ipsum.
Další odstavce s nějakým Lorem ipsum.
Další odstavce s nějakým Lorem ipsum.
Další odstavce s nějakým Lorem ipsum.
Další odstavce s nějakým Lorem ipsum.
Další odstavce s nějakým Lorem ipsum.
To už stačí. Zde je spodní okraj nadřazeného prvku, což je v tomto případě div.
Zde bude lepivé záhlaví tabulky:
<tr style="position: -webkit-sticky; position: sticky; top: 0px;"><th>Nadpis ...
| Nadpis sloupce 1 | Nadpis sloupce 2 |
|---|---|
| lorem ipsum | lorem ipsum |
| lorem ipsum | lorem ipsum |
| lorem ipsum | lorem ipsum |
| lorem ipsum | lorem ipsum |
| lorem ipsum | lorem ipsum |
| lorem ipsum | lorem ipsum |
| lorem ipsum | lorem ipsum |
| lorem ipsum | lorem ipsum |
| lorem ipsum | lorem ipsum |
| lorem ipsum | lorem ipsum |
| lorem ipsum | lorem ipsum |
V Exploreru a Edge to nebude dělat nic. Ve Firefoxu dříve sticky nefungoval pro tabulku (2024 už funguje). Pozadí záhlaví je schválně poloprůhledné, aby bylo vidět, co se děje. Lepší je neprůhledné.
Pro pochopení příkladu si prosím zobrazte zdroj. To podstatné je v inline stylech u h2 a tr. Příklad se vztahuje k popisu vlastnosti position.