# `PhiaUi.Components.Layout.Sticky`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/layout/sticky.ex#L1)

Sticky-positioned container that adheres to the top or bottom of the viewport
as the user scrolls.

Uses `position: sticky` so the element scrolls normally until it reaches the
configured offset, then sticks in place. The parent must have overflow that
allows sticky to work (i.e., not `overflow: hidden`).

## Examples

    <%!-- Sticky header inside a scrollable column --%>
    <.sticky position={:top} offset={0} z={20}>
      <.topbar title="Dashboard" />
    </.sticky>

    <%!-- Sticky at 64px (e.g., below a fixed 64px navbar) --%>
    <.sticky position={:top} offset={16}>
      <div class="bg-background border-b px-4 py-2">Filter bar</div>
    </.sticky>

    <%!-- Sticky footer actions inside a form panel --%>
    <.sticky position={:bottom} offset={0}>
      <div class="flex justify-end gap-2 p-4 bg-background border-t">
        <.button>Save</.button>
      </div>
    </.sticky>

# `sticky`

Renders a sticky-positioned container.
## Attributes

* `position` (`:atom`) - Which viewport edge to stick to. Defaults to `:top`. Must be one of `:top`, or `:bottom`.
* `offset` (`:integer`) - Offset in Tailwind spacing units (0 = `top-0`, 4 = `top-4`, 16 = `top-16`, etc.). Defaults to `0`.
* `z` (`:integer`) - z-index level. Defaults to `10`. Must be one of `0`, `10`, `20`, `30`, `40`, or `50`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `inner_block` (required) - Content to make sticky.

---

*Consult [api-reference.md](api-reference.md) for complete listing*