Sticky

You might say

Keep the navigation pinned to the top while people scroll down.

Keep an element visible after scrolling reaches itSticky positioning lets a header, table heading, or section navigation follow the viewport within its container. It needs a defined offset and enough room to move. Test parent overflow and small screens, because both can change or block sticky behavior.

Know first

Position

🔥 Popular components

Button

Text input

Card

🧭 Page navigation

Navigation menu

Pagination

Breadcrumbs

↕ Try scrolling: the group heading sticks to the top

Quick checkChoose the best answer

A long table sits in its own scroll panel, but its sticky header does not stick. What should be checked next?

Keep the layout and only increase the header z-index to 99999Confirm a top offset and inspect the real scroll ancestor, container height, and overflowChange the header to fixed so it remains at the top of the browser viewport

You can say this to an AI Agent

Debug the sticky table header: confirm sticky and top, identify the actual scrolling ancestor, and inspect its overflow, height, and available scroll distance. Do not replace it with fixed or only raise z-index; verify it sticks only within the table container.

When to use it

Keep table headers visible
Task StatusSign-in page redesign In progressPayment flow Complete
Keep section navigation nearby
AKaiBMs. Bai
Hold important actions within a long panel
Filter bar · sticky at top
Pin a page header after it reaches the top
position: sticky; top: 0;

When NOT to use it

Make several large regions sticky at once
Ancestor: overflow: hiddenMay limit sticky’s scroll rangeCheck ancestor overflow, the scroll container, and the available scroll height.
Cover the content people are trying to read
Fixed bar
fixed removes the bar from document flow and covers the first line of content.
Expect sticky to work through a clipping parent
Sticky heading with a transparent background
Use it on a small screen without checking remaining space
Sticky navigationSticky filtersSticky table header