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>