Sticky

Wrap any content inside this Sticky component to make it stick to the top edge of its scroll container. When stuck, the data-state="stuck" is added which you can use for state-based styling.

Any Sticky component only sticks when its height is smaller than its scolling container. User the tolerance property to add to the calculated required height which helps you tweak the desired behavior in certain situations.

'tolerance' => 0,
 
<style>
    #sample-sticky[data-state="stuck"] div {
        background: var(--color-positive-600);
    }
</style>
<x-scrollClip class="h-[400px]" signifiers="outside">
    <div class="h-[240px]"></div>
    <x-sticky id="sample-sticky">
        <div class="size-[80px] mx-auto rounded-xs bg-neutral-600"></div>
    </x-sticky>
    <div class="h-[960px]"></div>
</x-scrollClip>
 
<x-scrollClip class="h-[400px]" signifiers="outside">
    <div class="h-[240px]"><!-- spacer --></div>
    <x-sticky tolerance="48">
        <div class="w-[80px] h-[360px] mx-auto rounded-xs bg-neutral-600"></div>
    </x-sticky>
    <div class="h-[960px]"><!-- spacer --></div>
</x-scrollClip>