# CSS Sticky Positioning Tricks Thread

> Practical techniques for sticky layout interactions paired with interactive CodePen demos.

A curated reference thread by Jhey Tompkins showing practical UI interaction patterns powered by CSS position: sticky. It demonstrates how to create complex visual affordances—such as faux picture-in-picture, text highlighting, and masked transitions—with minimal JavaScript overhead.

## How it works

Thread opener: 'you can just position: sticky things — basic CSS layout tricks get overlooked so much, but often provide greater impact, going unnoticed.'

Quoted demo (@JohnPhamous): an additional affordance showing whether current scroll position is at the top — a cloud console UI (sidebar: Search, Home, Compute \> Clusters, Zones) that reveals an 'All Zones \>' breadcrumb header once scrolled.

Thread demos, each with a CodePen and debug config panel:

1. Inversion with mix-blend-mode.

2. Highlighter with progressive enhancement (scroll-progress-highlighted words: 'you can design. prototype. solve. build. develop. cook. ship.').

3. Faux picture-in-picture mode using :stuck (The Craft of UI course page, video in sticky holder).

4. Progressive-blur + sticky bottom (hero: 'Bringing clarity to the art of UI development', layers/mask/blur/saturate config).

5. clip-path + sticky + margin — exploded 3D diagram: sticky header inside \<main\> clipped to start; fixed header sits behind and gets covered by \<main\>; clip the top of \<main\> to hide the sticky header.

6. Scroll animation + sticky completions (highlighted word list with hue config).

7. Sticky table tricks for headings.

8. Sticky expanding morphing nav.

## What it is for

- Build lightweight picture-in-picture video containers on scroll
- Reveal sticky breadcrumbs or navigation bars based on scroll state
- Implement progressive text highlighting tied to reading progress
- Create layered sticky header reveals using clip-path masks

## Key points

- Color inversion effects using position: sticky combined with mix-blend-mode
- Text highlighter animations powered by scroll progress
- Faux picture-in-picture video player pinning
- Progressive blur and backdrop saturation pinned to the bottom of the viewport
- Layered header transitions using clip-path, sticky, and negative margins
- Morphing and expanding sticky navigation bars
- Interactive CodePen links with debug configuration panels for each trick

## Pricing

Free

## Details

- Type: Tip
- Category: [Development](https://xiry.app/topics/development.md)
- Open source: no
- Platforms: Web
- For: Frontend developers and UI/UX designers looking for pure CSS interaction patterns.
- Tags: css, web development, ui design, layout, animation, codepen

## Why it was saved

- [@jh3yy, 29 June 2025](https://x.com/jh3yy/status/1939305902395543633): Sticky tricks are basic CSS that get overlooked; these provide large UX impact cheaply.

## Related

- [Anime.js](https://xiry.app/resources/anime-js): Lightweight, modular JavaScript animation engine for CSS, SVG, and DOM elements (Website, Open source)
- [Transitions.dev](https://xiry.app/resources/transitions-dev): Curated library of copy-paste web app micro-interactions and transitions (Web app, Freemium)
- [GSAP](https://xiry.app/resources/gsap): High-performance JavaScript animation library for web elements, SVG, and canvas. (Website, Freemium)
- [8-Step AI Landing Page Workflow](https://xiry.app/resources/8-step-ai-landing-page-workflow): Step-by-step framework to build polished landing pages using Bolt and AI tools (Tip, Free)
- [Animating height: auto in CSS](https://xiry.app/resources/animating-height-auto-in-css): Modern CSS technique for smooth height transitions without fixed pixel heights (Tip, Free)
- [animation-reverse-engineering](https://xiry.app/resources/animation-reverse-engineering): Claude Code skill to turn animation videos into production Framer Motion code. (GitHub repo, Free)

Updated 11 October 2026. Page: https://xiry.app/resources/css-sticky-positioning-tricks-thread

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.