Navigation & structure

Sticky Positioning

Q: How do people describe a Sticky Positioning in plain words?

the filter bar that sticks under the header when I scroll section titles that pin until the next section pushes them away that thing that scrolls with the page then locks to the top

Q: How do I implement a Sticky Positioning?

Make the filter bar sticky: position: sticky; top equal to the header height; z-index above content. For a stuck shadow, place a 1px sentinel above it and toggle a class via IntersectionObserver. Ensure no ancestor uses overflow: hidden that kills sticky.

An element scrolls with the page until it hits an edge, then sticks there.

Also known as position sticky · affix · stick on scroll

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Sticky Positioning".

Make the filter bar sticky: position: sticky; top equal to the header height; z-index above content. For a stuck shadow, place a 1px sentinel above it and toggle a class via IntersectionObserver. Ensure no ancestor uses overflow: hidden that kills sticky.

Anatomy:
- stick edge / offset: top: 0 or clear a fixed header height.
- stuck state: Often add shadow or solid fill once stuck.
- group header sticky: Address-book effect: the next header pushes the previous off.

Preferred API / pattern: `CSS sticky / sticky table headers`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Sticky does nothing
○Avoid: No top/bottom value
○Avoid: Stuck bar transparent
○Avoid: z-index missing

In plain wordsHow people search for it

“the filter bar that sticks under the header when I scroll”“section titles that pin until the next section pushes them away”“that thing that scrolls with the page then locks to the top”

AnatomyOpen for part names

stick edge / offset: top: 0 or clear a fixed header height.
stuck state: Often add shadow or solid fill once stuck.
group header sticky: Address-book effect: the next header pushes the previous off.

How to write itOpen for stack patterns

Web (HTML/CSS)position: sticky; top: 0

React + Tailwind + shadcn/uiCSS sticky / sticky table headers

SwiftUIsafeAreaInset / section headers in List

Ant Design<Affix offsetTop> / Table sticky

Notes

Native sticky is underrated—group headers that replace each other need zero JS. Failures, in order: an ancestor with overflow hidden/auto/scroll; parent too short to scroll; missing top/bottom. Stuck styling needs a 1px sentinel + IntersectionObserver—CSS alone can’t detect “is stuck.”

Common mistakesHumans and models trip here

Sticky does nothing: walk up the tree for overflow hidden/auto—almost always the cause.
No top/bottom value: sticky never engages.
Stuck bar transparent: content bleeds through—solid fill + shadow when stuck.
z-index missing: scrolling content paints over the bar.

More failure symptoms on AI broke it.

Related patterns

Tab Bar / Bottom NavigationFixed bottom global navigation switching top-level app areas.Back to TopA control that appears after a long scroll and jumps the user back to the top of the page.Data TableA grid of rows and columns for comparing structured records.Glassmorphism / Backdrop BlurBlur what’s behind a surface and tint it so the layer reads as translucent glass.

Spotted a wrong name or missing pattern?

Message on X