# sticky

The markup of every demo on <https://kuiper.oeds.it/sticky/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## default

The component with no options set -- what the markup alone gives you, before any parameter is tuned. Read this one first: every other panel on the page is a departure from it.

Varies: 2 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card border padding-2xs height-m overflow-auto"><div class="card background-primary-3xdark padding-2xs" data-sticky="offset: 0;"><p>data-sticky</p></div><p>Scroll this card. Line 1.</p><p>Scroll this card. Line 2.</p><p>Scroll this card. Line 3.</p><p>Scroll this card. Line 4.</p><p>Scroll this card. Line 5.</p><p>Scroll this card. Line 6.</p><p>Scroll this card. Line 7.</p><p>Scroll this card. Line 8.</p><p>Scroll this card. Line 9.</p><p>Scroll this card. Line 10.</p><p>Scroll this card. Line 11.</p><p>Scroll this card. Line 12.</p><p>Scroll this card. Line 13.</p><p>Scroll this card. Line 14.</p></div><p class="text-xs text-muted">data-sticky</p></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card border padding-2xs height-m overflow-auto"><div class="card background-primary-3xdark padding-2xs"><p>no attribute</p></div><p>Scroll this card. Line 1.</p><p>Scroll this card. Line 2.</p><p>Scroll this card. Line 3.</p><p>Scroll this card. Line 4.</p><p>Scroll this card. Line 5.</p><p>Scroll this card. Line 6.</p><p>Scroll this card. Line 7.</p><p>Scroll this card. Line 8.</p><p>Scroll this card. Line 9.</p><p>Scroll this card. Line 10.</p><p>Scroll this card. Line 11.</p><p>Scroll this card. Line 12.</p><p>Scroll this card. Line 13.</p><p>Scroll this card. Line 14.</p></div><p class="text-xs text-muted">for comparison</p></div>
</div>
```

## in the framework

The site's own header, which is a real `data-sticky` and not a demo of one: scroll this page and the bar you are reading pins. Kuiper rewrites its `vh` to `dvh` so the offset follows the mobile toolbars.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1"><div class="card"><p>The site header is the framework's own use of it: <code>data-sticky</code> on the header element, which is why the bar stays at the top of every page here. The component writes <code>sticky</code>, <code>sticky-fixed</code> and a <code>sticky-placeholder</code> that reserves the space the element leaves behind, so nothing jumps when it detaches.</p></div></div>
</div>
```