Layout

Sticky Positioning

Use the .sticky family of utility classes to pin elements within their scroll container. By combining with top-*, bottom-*, left-*, or right-*, you control the edge at which the element “sticks.”

Basic Usage

Simply add .sticky and one of top-0, bottom-0, etc. to make the element stick.

<div class="sticky top-0 bg-white p-4 shadow">
  I stick to the top once you scroll past me.
</div>

(Scroll this section to see it remain fixed at the top of its scroll area.)

Position Utilities

Control the sticking edge with:

• top-0, top-1, top-4, etc.
• bottom-0, bottom-2, bottom-8, …
• left-0, left-2, right-0, right-4, …

Responsive Sticky

Use breakpoint-prefixed classes to enable sticky only at certain widths:

• .sm-sticky, .md-sticky, .lg-sticky, .xl-sticky

<div class="md-sticky md-top-4 p-3 bg-white">
  Only sticks at ≥768px viewport.
</div>