You add position: sticky and top: 0 to your header. You scroll. The header scrolls away like nothing happened.

No error in the console. No warning in DevTools. Just a header that won't stick.

This post explains the usual reason, shows a fix you can paste in, and gives you a small script that finds the problem for you.

The problem

Someone posted this in a CSS forum. Here is the gist, in our own words.

They wanted the header on their page to stay at the top while the user scrolled. They added position: sticky . Nothing changed. They had already worked through a popular checklist of "why sticky isn't working": siblings, parent height, z-index, browser support. Still no luck.

The answer that solved it was one line far away from the header: a wrapper higher up the page had overflow: hidden .

Quick version of how sticky works

A sticky element acts like a normal element until you scroll it to a set point.…