Why position: sticky Is Not Working (and How to Fix It)
A checklist of the real reasons CSS position: sticky stops working - missing offsets, overflow on ancestors, short parents - and how to fix each one.
6 min read - Updated 2026-06-18
position: sticky almost always fails for one of a handful of reasons, and none of them throw an error - the element just scrolls away as if sticky were never declared. Work down this list in order and you will find the culprit fast.
1. You forgot the threshold offset
This is the number-one cause. sticky needs at least one of top, right, bottom, or left to know where to pin. Without it the element is valid but never engages.
Add top: 0 (or another edge) to the sticky element itself
The offset is measured from the scroll container's edge
Offsetting for a fixed header? Add that header's height to top
Confirm the value is not being overridden lower in the cascade
2. An ancestor has the wrong overflow
If any parent between the sticky element and the scroll root has overflow set to hidden, auto, or scroll, it creates a new scroll context and the element sticks to that instead - usually invisibly.
Search up the tree for overflow: hidden/auto/scroll
A common offender is a wrapper added for rounded corners or clipping
Remove or move the overflow, or make that ancestor the scroll context
Use DevTools to walk ancestors and watch where sticking breaks
3. The parent is too short (or the wrong display)
Sticky is constrained to its direct parent. If the parent is only as tall as the element, there is no room to travel, so it appears not to stick. Certain display and height combinations also interfere.
Give the parent enough height for scrolling to occur within it
Watch for height: 100% chains that collapse the container
In tables, stick to th/thead and confirm browser support
Re-test after every layout change, since new wrappers reintroduce the bug
Release checklist
Threshold offset is set on the sticky element.
No ancestor has overflow hidden/auto/scroll unintentionally.
The parent container is tall enough to allow travel.
Behavior verified at multiple viewport widths.
Frequently asked questions
Why is position sticky not working at all?
In most cases you are missing a threshold offset - sticky does nothing without top, bottom, left, or right. The next most likely cause is an ancestor with overflow: hidden, auto, or scroll capturing the scroll context.
Does overflow: hidden break position sticky?
Yes, if it is on an ancestor between the sticky element and the scroll root. That ancestor becomes the scroll container, and the element only sticks within it - which often looks like it is not sticking at all.
Why does sticky stop halfway down the page?
Sticky is constrained to its direct parent. Once that parent scrolls out of view, the element un-sticks. If it stops earlier than expected, the parent is shorter than you think - give it more height or move the element up the tree.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.