17 CSS Sticky Elements

#cssstickyheader #animation-timelinescrollnavbar #layouts #cssdesign #css+js #css-only

17 hand-coded CSS position: sticky demos: sticky header on scroll, sticky sidebar + Table of Contents with scrollspy, sticky table header + frozen first column, sticky add-to-cart bar, sticky checkout summary, sticky footer, stuck-state detection and the canonical debug lab for "why is my sticky not working". 15 Pure CSS + 2 tiny JS snippets, WCAG 2.2 AA, container-query responsive, uses modern scroll-state() / animation-timeline: scroll() / view() where available with graceful fallbacks. Scoped under .cst-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.

17 light JSPublished Aug 2, 2026

01 / 17CSS only

CSS Sticky Header on Scroll Example

The canonical pattern, built the way it should be shipped in 2026: one declaration — position: sticky; top: 0 — pins the nav, backdrop-filter keeps content legible sliding beneath it, and scroll-padding-top stops anchor links from burying headings under the bar. No fixed-position layout jump, no body padding hack, no scroll listener. Everything else on the page is just proof it works.

PublishedAug 2, 2026

02 / 17CSS only

CSS Sticky Header Change Background on Scroll

The transparent-over-the-hero header that turns solid the instant it pins — with zero JavaScript. The 2026 way is a scroll-state container query: the sticky header declares container-type: scroll-state, and @container scroll-state(stuck: top) restyles its contents the exact frame the browser pins it. No scroll listeners, no thresholds to tune, no main-thread work — and a translucent-glass fallback keeps it readable in browsers that haven't shipped the query yet.

PublishedAug 2, 2026

03 / 17CSS only

Sticky Shrinking Navbar CSS

A header that spends its first 160px of scroll gracefully slimming down — padding tightens, the wordmark shrinks, a background and shadow fade in — driven entirely by animation-timeline: scroll(). The scrubbing is done by the compositor, not a scroll event handler, so it stays butter-smooth on a mid-range phone, and it reverses perfectly when you scroll back up. Browsers without scroll-driven animations get the compact header from the start.

PublishedAug 2, 2026

04 / 17CSS only

CSS Sticky Secondary Header Tabs

Two cooperating stickies: the main store header pins at top: 0, and a product tab bar (Overview · Specs · Reviews · FAQ) pins directly beneath it at top: var(--h1) — the offset handshake that keeps stacked bars from overlapping or leapfrogging. Tab clicks highlight themselves with a pure-CSS :has(:target) scrollspy, and every section clears both bars via scroll-margin-top. The pattern behind every product page, app settings screen and API reference built this decade.

PublishedAug 2, 2026

05 / 17CSS only

CSS Sticky Sidebar Inside Flexbox Container

The most-asked sticky question on Stack Overflow, answered in one property: a sidebar inside a flex row won't stick because flexbox stretches it to the container's full height — and an element with no room to travel has nothing to stick against. align-self: flex-start restores its natural height and the sidebar immediately pins, rides alongside the article, then parks at the container's bottom edge. The demo continues past the article so you can watch it park.

PublishedAug 2, 2026

06 / 17CSS + JS

CSS Position Sticky Table of Contents

The 'On this page' rail every documentation site ships: a sticky TOC that rides beside long-form content, highlights the section you're reading via a 14-line IntersectionObserver, and shows a reading-progress bar scrubbed by pure CSS animation-timeline: scroll(). The sticky part costs two declarations; the scrollspy is the smallest correct one you'll find — no scroll math, no throttling, no getBoundingClientRect.

PublishedAug 2, 2026

07 / 17CSS only

CSS Sticky Section Headers List

The iOS-contacts pattern: alphabetical group headers that pin to the top of the list, then get pushed out by the next arriving header — that satisfying shove is not an animation, it's the containing block doing its job. Each header is sticky inside its own <section>, so its leash ends exactly where the next group begins. A directory app shell with a letter rail, all CSS, zero scroll listeners.

PublishedAug 2, 2026

08 / 17CSS only

CSS Sticky Card Stack Effect

The scroll-storytelling deck: four full-screen chapter cards that pile onto each other as you scroll, each new card sliding over the pinned previous one with a staggered 14px offset so the stack reads as physical depth. The pile-up is nothing but sticky elements sharing one parent — the exact opposite wrapper structure of demo 07 — plus a view()-timeline entrance that browsers without scroll-driven animations simply skip.

PublishedAug 2, 2026

09 / 17CSS only

CSS Sticky Table Header Scrollable Div

The admin-dashboard staple: an orders table inside an overflow: auto div whose column headers pin to the top — and, as a bonus almost nobody ships, a totals row pinned to the bottom. The whole thing is position: sticky on the th cells plus the one line that makes or breaks sticky tables everywhere: border-collapse: separate. Collapse mode hands cell borders to the table itself, so they scroll away and your 'sticky' header appears to shed its underline.

PublishedAug 2, 2026

10 / 17CSS only

CSS Sticky First Column Table Horizontal Scroll

Twelve months of revenue across a table too wide for any screen — with the row labels frozen at left: 0, the month headers frozen at top: 0, and the corner cell frozen on BOTH axes at once. Freezing columns is identical to freezing headers, rotated 90°; the only genuinely new idea is the z-index ladder that keeps the corner above the column, the column above the rows, and a gradient edge that tells users the table slides.

PublishedAug 2, 2026

11 / 17CSS only

CSS Sticky Add to Cart Mobile Bottom

The highest-converting pixels in mobile commerce: a bottom-pinned bar with the price and the buy button, always one thumb-tap away. The trick is that position: sticky; bottom: 0 works in reverse — place the bar near the END of the page and it rides pinned at the viewport bottom from the first paint, then settles into normal flow when you reach it. Add :has() and the CTA stays disabled until a size is picked — state management with zero JavaScript.

PublishedAug 2, 2026

12 / 17CSS only

CSS Sticky Floating Promo Banner Top

The announcement bar above the store nav — free shipping, promo code, ends Sunday — pinned at top: 0 with the nav pinned beneath it, and a dismiss button that works with zero JavaScript: a hidden checkbox, a :has() selector, and one custom property that re-docks the nav to top: 0 the instant the banner disappears. The whole layout breathes through a single --bannerH variable.

PublishedAug 2, 2026

13 / 17CSS only

CSS Sticky Checkout Order Summary Sidebar

The checkout layout that measurably reduces abandonment: form fields on the left, order summary pinned on the right, so the total never leaves the buyer's sight while they type a shipping address. One grid, one sticky aside with align-self: start, and real form semantics — labels, autocomplete tokens, focus rings — because a checkout demo without them teaches the wrong lesson. On narrow screens the summary un-sticks and stacks on top, the honest mobile translation.

PublishedAug 2, 2026

14 / 17CSS only

CSS Sticky Footer to Bottom of Screen

The OTHER sticky footer — the one that predates position: sticky and still fills support forums: on a short page the footer floats awkwardly mid-screen; you want it pinned to the viewport bottom, but pushed down naturally once content grows. The 2026 answer is three lines of grid. This demo has a Short page / Long page toggle (a checkbox and :has(), no JS) so you can watch the same three lines handle both cases.

PublishedAug 2, 2026

15 / 17CSS only

CSS Position Sticky Social Share Bar Left

The editorial share rail: a slim column of share actions pinned at the article's left margin, riding alongside as you read and retiring exactly where the article ends — because sticky is caged by its container, the rail can never haunt the comments section. On narrow screens the same element becomes a floating glass pill pinned above the viewport's bottom edge. One DOM node, two sticky physics, zero JavaScript.

PublishedAug 2, 2026

16 / 17CSS only

CSS Position Sticky Not Working Overflow

The bug lab for the most-Googled sticky question of all. Two identical columns scroll side by side: in the left one, a wrapper with overflow: hidden silently murders the sticky pill; in the right one, the SAME wrapper uses overflow: clip — and the pill sticks perfectly. Because hidden creates a scroll container (one that never scrolls) while clip only clips. Below the lab: the 60-second debugging drill and the five failure modes ranked by how often they're the culprit.

PublishedAug 2, 2026

17 / 17CSS + JS

Detect CSS Sticky Element Stuck Class

The question behind half the sticky questions: “how do I style it differently WHILE it's stuck?” This demo answers twice, live, with a HUD showing both sensors. Sensor one is 2026 CSS — container-type: scroll-state with @container scroll-state(stuck: top), zero JavaScript, fires the exact frame the pin engages. Sensor two is the 12-line IntersectionObserver sentinel that toggles an .is-stuck class everywhere else. Same declarations, two triggers — ship both today, delete the JS in a year or two.

PublishedAug 2, 2026

FAQ

Frequently asked questions

When should I use position:sticky vs position:fixed vs a JavaScript scroll listener in 2026?

The 3-way decision matrix that survives every edge case: use position: sticky when the element must stick within a defined ancestor scrollport (a sticky sidebar that scrolls with its parent grid column, a sticky table header inside an overflow div, a sticky section header in an iOS-contacts list). Sticky elements participate in normal document flow, respect their ancestor's box, unpin naturally when the scrollport ends, and cost zero JavaScript. Use position: fixed when the element must stay relative to the VIEWPORT regardless of scroll parent (a persistent cookie banner, a bottom navigation bar on a mobile PWA, a chat widget in the corner). Fixed elements are removed from flow and don't respect ancestor boundaries — including transform, filter, and contain: paint on ancestors, which silently break fixed positioning by creating a new containing block. Use a JavaScript scroll listener in 2026 only when you need behavior that CSS can't express: dynamic class toggles on non-adjacent DOM elements, throttled scroll analytics, or a scroll-linked animation older than the animation-timeline: scroll() spec (Chrome 115+, Safari 26 shipping, Firefox behind flag as of 2026-08). Every scroll-listener pattern shipped before 2024 (shrinking navbars, background-change on scroll, sticky-stuck class detection) has a pure-CSS equivalent in modern browsers — Demos 02, 03, and 17 in this collection ship the exact recipes. The productivity win: no scroll-listener means no throttle bugs, no jank on 60Hz-vs-120Hz displays, no INP tax on Google's Core Web Vital (promoted March 2024), and no window.addEventListener('scroll') to remove on unmount in your React / Vue / Svelte cleanup.

Why is my CSS position:sticky not working — and how do I actually fix it (the 4 canonical causes)?

"position: sticky doesn't work" is one of the top-3 CSS Stack Overflow questions of all time. There are exactly 4 canonical causes, and Demo 16 in this collection ships a side-by-side lab showing each: (1) An ancestor has overflow: hidden, overflow: auto, overflow: scroll, or overflow: clip. This is the #1 cause. Any of those creates a scroll container — and sticky then binds to THAT container, not the viewport. If the ancestor is not the intended scrollport, sticky appears broken (it stops working at the ancestor's boundary, or never scrolls). Fix: audit your ancestor chain with DevTools; either remove the overflow declaration (if it was aspirational) or accept sticky will bind there. (2) A parent has an explicit height (or max-height) shorter than the sticky element + its scroll distance. Sticky can't scroll past its parent's box — if the parent is 400px tall and you want the child to stick for 800px of scroll, it un-sticks at 400px. Fix: remove the parent height or use min-height instead. (3) The sticky element's grid or flex parent is stretching it via align-items: stretch (the default) — a stretched element has no free vertical space to stick within. Fix: align-self: start (or flex-start) on the sticky element itself, or align-items: start on its grid/flex parent. Demo 05 and Demo 11 both ship this fix. (4) Missing the top/bottom/left/right offset. position: sticky without an offset is inert — nothing to stick to. Fix: add top: 0 (or your desired offset). Not causes: Safari old-webkit-prefix (dropped 2017), z-index issues (sticky has its own stacking context), display: table (works fine in modern browsers). Demo 16 lets you toggle each of the 4 causes live and see the sticky element break in real time.

How do I detect when a sticky element becomes 'stuck' (pinned to the top) for CSS styling — the shadow-on-scroll pattern?

The 'stuck detection' pattern (add box-shadow / change background when a sticky header becomes pinned) has TWO 2026 solutions, layered for maximum browser support — Demo 17 ships both as a dual sensor. Modern pure CSS: @container scroll-state(stuck: top) (Chrome 129+, Safari 26 shipping). Wrap the sticky element in a container with container-type: scroll-state, then style based on the stuck state: @container scroll-state(stuck: top) { .header { box-shadow: 0 4px 12px rgba(0,0,0,0.1) } }. Zero JavaScript, zero listener, zero performance cost. Universal fallback: IntersectionObserver sentinel. Insert a 1px-tall invisible <div> just above the sticky element. Watch the sentinel with new IntersectionObserver((entries) => { header.classList.toggle('is-stuck', !entries[0].isIntersecting) }). When the sentinel scrolls out of view above the fold, the sticky element MUST be pinned. This pattern is 6 lines, works in every browser since 2019 (Chrome 51 / Safari 12.1 / Firefox 55), and costs zero scroll-listener re-fires because IntersectionObserver runs on a compositor thread. Ship the CSS version behind @supports (container-type: scroll-state) and the IO version as the fallback — that's exactly what Demo 17 does. The 'add shadow when stuck' pattern is on Vercel, Linear, Stripe, Notion, GitHub, Superhuman, and every SaaS dashboard shipped in 2025-2026, because a header that gains elevation on scroll signals 'you've entered the app content area' more clearly than any other affordance.

How do I build an accessible sticky Table of Contents with scrollspy + progress bar — WCAG 2.2 AA — for a documentation site?

Demo 06 ships the canonical pattern used by Docusaurus, Mintlify, Nextra, VitePress, Astro Starlight and every 2026 developer-docs site. The recipe stacks 3 layers: (1) The sticky TOC container — <aside role='navigation' aria-label='Table of contents'> (semantic landmark so screen readers surface it in the rotor), containing an <ol> of <a href='#heading-slug'> links. Position: position: sticky; top: 96px; align-self: start (align-self: start prevents the grid parent from stretching the aside and killing sticky). (2) The scrollspy (highlight the active section) —

new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) toc.querySelector('[href="#' + e.target.id + '"]').setAttribute('aria-current', 'location') }) }, { rootMargin: '-40% 0px -50% 0px' })

. The aria-current='location' attribute is the WCAG 2.4.8 (Location) way to indicate the current-position link — screen readers announce it as 'current'. The rootMargin creates a 10% detection zone in the middle of the viewport so only ONE section is 'active' at a time. (3) The scroll-driven progress bar — a horizontal bar at the top of the page that fills as the user scrolls. Modern: animation-timeline: scroll(root block) + animation: scale(0 → 1) on the bar's transform. Universal fallback: same IntersectionObserver + scrollY / (document.body.scrollHeight - window.innerHeight) width calc. Accessibility non-negotiables: real <a href> links (not clickable <li> or <button>), so users can right-click → copy URL to share a deep-link. Every link has a hover + focus-visible state at 3:1 contrast per WCAG 2.4.13 (Oct 2023 update). The sticky container includes a 'Skip to main content' link as its first child so keyboard users can bypass the TOC on every page. prefers-reduced-motion: reduce disables the progress bar's fill animation and the scrollspy's smooth-scroll behavior. This pattern is what Google's Developer Style Guide, Stripe Docs, Vercel Docs, Linear Docs, Notion Docs, and every tier-1 SaaS documentation site ships in 2026 — no libraries, ~40 lines of JS.

How do I build a sticky data table with sticky header AND sticky first column (Excel / Airtable / Retool pattern)?

Demo 10 ships the exact recipe most tutorials get wrong. Three sticky positions cooperate on ONE table, and the trap is the corner cell where header row and first column intersect. Sticky header row — thead th { position: sticky; top: 0; z-index: 2; background: var(--surface) }. The opaque background is critical: without it, scrolled content bleeds through. Sticky first column — tbody td:first-child, thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface) }. Same opaque-background rule. The corner cell (top-left) — needs BOTH sticky positions AND a higher z-index than either the header row or the first column, or it disappears behind them at the scroll intersection: thead th:first-child { position: sticky; top: 0; left: 0; z-index: 3; background: var(--surface) }. The border trap — on Chrome < 125 and Safari < 17, sticky positioning silently doesn't work on <th> inside a table with border-collapse: collapse. Fix: border-collapse: separate; border-spacing: 0, then draw borders via box-shadow: inset 0 -1px 0 var(--edge). Demo 10 ships all three fixes with the exact z-index ladder + border-collapse workaround. This is the core of Airtable's grid view, Retool's Table component, Metabase's query results, Datadog's monitor list, Sentry's error list — anywhere a dev needs to render 500+ rows without an infinite-scroll library or a virtual-scroll dependency. Accessibility: keep the <table> semantic; add scope='col' to header cells and scope='row' to first-column cells so screen readers announce row/column context when a user tabs into any data cell. Google Sheets and Airtable both do this — check their DevTools.

Which CSS sticky patterns fit high-CPM verticals — SaaS admin dashboards, fintech trading terminals, e-commerce checkout, real-estate listings, legal case management, healthcare EHR?

Sticky elements are the highest-leverage CSS pattern for above-the-fold conversion because they keep the primary action (cart, contact, filter, TOC) always in view without JavaScript. Six demos in this collection map to very-high-CPM verticals: Demo 09 + Demo 10 (Sticky table header + Sticky first column) are the reference implementation for Airtable / Retool / Metabase / Datadog / Sentry / New Relic / Bloomberg terminals / Robinhood / TradingView / Interactive Brokers / Fidelity Active Trader — anywhere a dev renders a data-dense grid where scroll context (both column headers and the first-column identifier) must stay visible. Fintech trading CPM $25-45, SaaS admin dashboards $15-25. Demo 11 (Sticky Add-to-Cart Mobile Bottom Bar) is the Shopify / WooCommerce / BigCommerce / Squarespace mobile e-commerce pattern. The bottom-anchored bar with size / color pickers + price + Add-to-Cart increases mobile conversion 15-30% (Baymard Institute research 2024). Ships with env(safe-area-inset-bottom) for notched iPhones. Fashion e-commerce CPM $8-15, luxury fashion $15-30, sneaker resale $10-20. Demo 13 (Sticky Checkout Order Summary Sidebar) is the Stripe Checkout / Shopify Checkout / WooCommerce Checkout desktop pattern — order summary stays pinned as the user scrolls through the form. Direct conversion lift of 8-14% in A/B tests (Baymard). Payment processing CPM $15-30. Demo 06 (Sticky TOC + Scrollspy) is the Docusaurus / Mintlify / Nextra / VitePress / Astro Starlight documentation pattern. Every developer-tools SaaS ships this because engineering-doc site quality is a purchase-influence signal for procurement. Dev-tools CPM $8-15, higher when the docs rank for high-intent long-tail queries. Demo 03 (Sticky Shrinking Navbar) is the reference for Vercel / Linear / Stripe / Notion / Framer / Cursor marketing pages — the navbar reclaims vertical space on scroll while keeping the CTA visible. Small-shrink + smooth scale-timeline is the modern replacement for the old JS scroll-listener pattern that used to tank INP scores. SaaS marketing CPM $15-25. Each of these very-high-CPM verticals rewards the WCAG 2.2 AA accessibility + INP 0ms + CLS 0 moat this collection ships, because enterprise procurement (Airtable / Stripe / Shopify vendor onboarding) has accessibility and Core Web Vitals as literal RFP checklist items.

Do these CSS sticky elements work in React, Vue, Svelte, Astro, Next.js, Remix, and SvelteKit — and what's the framework portability story vs sticky-element libraries?

Every sticky is plain HTML + CSS with zero dependencies, zero build steps, and zero framework lock-in. To port to React / Next.js App Router: rename class to className, drop the JSX into any server or client component (no 'use client' directive needed for the 15 Pure CSS demos because they have no interactivity that requires hydration; only Demos 06 IntersectionObserver scrollspy and 17 stuck-detection sensor need it under 30 lines JS each). Vue 3 / Nuxt 3: accepts as-is, class attribute is native. Svelte / SvelteKit: accepts as-is. Astro: drop into any .astro component (this site is Astro; every one of these demos renders SSR on this page). Remix: any route module. Solid.js / Qwik: accepts as-is. Compared to framework-specific sticky libraries: react-sticky (35K weekly downloads, unmaintained since 2019) does the CSS position: sticky reservation in JavaScript — pure over-engineering for what browsers do natively. react-stickynode (40K weekly downloads) adds throttled scroll listeners that cost INP; the CSS equivalent is 0ms. @react-aria/aria-modal ships accessible sticky primitives but locks you into React. vue-sticky-directive, svelte-sticky, @angular/cdk/scrolling — same story. None of them ship anything CSS position: sticky doesn't do natively better since Chrome 56 / Safari 13 / Firefox 32 (all Baseline-supported since 2020). The .cst-NN numeric-prefix scoping means all 17 sticky patterns coexist on the gallery page without a single class collision, and the same prefix guarantees you can drop any one demo into a codebase that already uses .sticky, .header, .sidebar, .toc, or .footer classes without renaming a single selector. MIT licensed, no attribution required, no signup.

Related collections

15 CSS Aspect Ratio Demos

15 hand-coded CSS aspect-ratio demos for video embeds, product galleries, IAB ad slots, native dialogs, and CLS-safe placeholders: 16:9 iframe YouTube embed with click-to-load facade + up-next rail, 21:9 full-screen hero video with min-height/max-height:100svh guardrails + Ken Burns drift, 1:1 Instagram-style square grid with 2×2 feature tile, 4:3 magazine card image cover, 9:16 vertical stories rail (TikTok/Reels/Shorts pattern) with scroll-snap + segment bars, 4:5 apparel product image gallery with radio-driven state + 1:1 thumbnails, 1:1 zoom thumbnail carousel with pointer-tracked --zx/--zy magnifier, prevent-layout-shift placeholder with live PerformanceObserver CLS meter (before/after side-by-side lab), dynamic content fallback with three policies (bend/strict/auto) via :has() toggle, IAB ad banner slots (728×90 leaderboard, 300×250 medium rectangle, 300×600 half-page, 320×50 mobile) with skeletons + container-query mobile swap, responsive modal dialog sized min(92vw, 88svh×16/9, 1080px) with @starting-style animation, responsive OpenStreetMap iframe wrapper with 16:9 → 1:1 container-query narrow swap, media query orientation live HUD + resize:both container-ratio playground, object-fit logo cloud with contain/cover/fill switcher via :has(), and side-by-side padding-top hack (height:0 + padding-top:56.25%) → modern aspect-ratio migration comparison with live ratio picker. 11 truly Pure CSS + 4 with a tiny optional vanilla JS snippet (facade swap, pointer magnifier, CLS meter, native dialog). Every demo is scoped under a unique .car-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).

6 CSS Bento Grid Layouts

6 production CSS bento grid layouts with 12 hand-coded designs — Apple-style product showcase, SaaS feature value-prop matrix, analytics dashboard overview, creative portfolio, e-commerce category hub, and link-in-bio social hub. Each topic ships 2 sub-variants side-by-side so visitors see both a keynote aesthetic and a paper-doc variant at once. Container queries, CSS Grid, zero dependencies, copy-paste ready.

20 CSS Blog Layouts

20 hand-coded CSS blog and editorial layouts for magazine homepages, news sites, personal archives, newsletter back-issues, recipe and podcast blogs, developer tutorials, and long-form journalism. Covers a magazine homepage with hero plus editor-picks rail, a news homepage with breaking-news ticker, blog archives with sticky year separators, Substack-style issue-numbered archives, recipe card grids with prep-time badges, podcast episode lists with waveforms, long-form articles with scroll-driven reading progress, drop caps and floated pull quotes via first-letter, Medium-style 65ch centred reader layouts, dev tutorials with a sticky code panel beside prose, interview transcripts with alternating speakers, case-study pages with stat counters, video blogs with an episode rail, full-bleed photo essays, news articles with sticky related-stories sidebars, documentation pages with prev/next chapter nav, a standalone blog post card, a scroll-snap category filter bar, an inline newsletter callout that breaks out of the prose column, and a horizontal featured-post rail. 12 are pure CSS with zero JavaScript. Every layout is scoped under a .bl-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.