You can now detect when sticky is actually stuck. In CSS.

You can now detect when a sticky element is actually… stuck.

In CSS.

No scroll listener. No class toggle. No JavaScript.

Here is the idea: you turn the sticky wrapper into a scroll-state container.

.header-container {
	position: sticky;
	top: 0;
	container-type: scroll-state;
}

Then CSS can ask a very useful question:

“Is this element currently stuck to the top?”

@container scroll-state(stuck: top) {
	.header {
		box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
	}

	.title {
		font-size: 1.5rem;
	}
}

So when the header reaches the top and actually becomes sticky, its style changes automatically.

In this kind of example:

• the header gets a shadow
• the title becomes smaller
• transitions can smooth the whole change

That means the header can feel more alive without any scroll logic in JavaScript.

This solves a very common UI need. Designers often want one visual state before the header sticks, and another one after it locks to the top.

Before scroll-state, that usually meant watching scroll position, toggling a class, and keeping logic in sync with layout.

Now the browser can expose that state directly to CSS. That means the visual change happens for the real sticky moment, not for a rough threshold you had to maintain in JS.

That is why this feature is so interesting. It removes the glue code around a behavior the platform already understands.

It is especially useful for documentation layouts, long-form articles, dashboards, and sticky section bars. Anywhere a header changes role once it reaches the top, this becomes a clean native hook.

Support is still experimental, so treat it as progressive enhancement. But as a platform feature, it is a very strong step forward.

Less code. Less coordination between CSS and JS. More behavior described where the styling already lives.

Want to build modern interfaces with less JavaScript?

I wrote a guide about building modern UI with HTML and CSS first. It covers practical patterns you can use before reaching for JavaScript.

Learn more