← Open sourceDesign context and craft

sticky-killer

Names the ancestor element that breaks position: sticky, as a devtools snippet, bookmarklet and extension.

Status
Live
Launched
Licence
MIT
Language
JavaScript
Run it

One command, copied from the repo.

Install sticky-killer: npx github:rishsadh/sticky-killer check page.html

rishsadh/sticky-killer

What it does

It finds every position: sticky element on a page, shadow DOM included, and names the ancestor that stops each one. It checks for no inset set, a scroll container that never scrolls and no room in the parent, and adds notes such as a real scroller the element sticks inside. It then applies the suggested fix in memory, scrolls, and measures whether the element now sticks. The fix is usually overflow: clip. The repo has no dependencies.

It comes four ways, all running the same code: a CLI on a file or URL, a DevTools snippet, a bookmarklet, and a Chrome extension that is not in the Chrome Web Store. The CLI exits 1 when something is blocked, 0 when not and 2 on an error, so it can run in CI against built HTML.

The repo also holds a measurement of what actually breaks sticky, run on 30 Sep 2026 in Chromium 151.0.7922.34 and WebKit 26.6 (Playwright's WebKit build, not Safari). Overflow other than visible or clip, a missing inset and a parent with no room broke sticky. transform, filter, contain, will-change and perspective did not. Firefox is not measured, and the CLI and extension need Chrome or Edge.

Why it exists

On 30 Sep 2026 a search of GitHub and npm for a tool that finds the ancestor breaking position: sticky found none. The closest hit was a 2017 sticky-viewport bookmarklet that does something else.

The answer is almost always that some ancestor has overflow set, and finding which one means clicking up the tree in DevTools and reading computed styles by hand. The same wall appeared while rebuilding scroll sections on the author's own site.