css sticky header
All collections tagged with "css sticky header"
22 CSS Headers
22 hand-coded CSS page header patterns — command-palette (⌘K), docs-site header with version + search, SaaS app-shell header, e-commerce header with cart + wishlist + account, marketing header with sticky CTA slide-in, article header with reading progress, minimal centered-logo editorial, transparent-over-hero, breadcrumb integration, notification bell + user menu, GitHub star pill, sticky scroll-timeline, CSS Grid mega menu, hamburger overlay, glassmorphism, dismissible announcement bar, double-decker enterprise, animated link hover, vertical sidebar app-shell, multi-level dropdown, shrinking header on scroll.
17 CSS Sticky Elements
17 hand-coded CSS position:sticky demos covering every real-world sticky use case: sticky header on scroll, sticky header that changes background when scrolled (via scroll-state() container queries), sticky shrinking navbar with animation-timeline: scroll(), stacked sticky header + secondary tabs with :has(:target) scrollspy, sticky sidebar inside flexbox with align-self:flex-start, sticky Table of Contents with IntersectionObserver scrollspy + scroll-driven progress bar, iOS-contacts sticky section headers with alphabet rail, sticky chapter card stack with view() timeline entrances, sticky table header inside scrollable div, sticky first column + header with correct z-index corner cell (Airtable/Retool/Metabase pattern), mobile sticky add-to-cart bottom bar with safe-area-inset, sticky floating promo banner with :has(:checked) dismiss, sticky checkout order summary sidebar, sticky footer to bottom of short pages via grid auto/1fr/auto, sticky social share rail (desktop-left / mobile-bottom via container query), a debug lab showing why sticky breaks when an ancestor has overflow:hidden (vs overflow:clip), and a stuck-state detection sensor using both scroll-state(stuck: top) AND IntersectionObserver sentinel fallback. 15 truly Pure CSS + 2 with a tiny optional vanilla JS snippet. Every sticky is scoped under a unique .cst-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).
25 CSS Sticky Navigation
25 hand-coded CSS sticky navigation patterns for SaaS marketing headers, documentation shells, e-commerce storefronts, article readers, and mobile app views. Pure CSS position:sticky with zero JavaScript, responsive hamburger toggle, shrink-on-scroll header, hide-on-scroll-down / reveal-on-scroll-up, transparent-to-solid over hero, article reading progress bar, wordmark-to-mark logo morph, underline-slide active indicator, theme-aware token swap, split centered-logo layout, neumorphic soft-UI, multi-column mega menu dropdown (e-commerce), search bar + cart badge counter, announcement bar stacked above nav, sticky sub-navigation locked under main header, icon-to-full-width search expand, sticky sidebar table-of-contents (Docusaurus / Mintlify pattern), mobile bottom tab bar with env(safe-area-inset-bottom), active-section scrollspy, horizontal snap-scroll tab bar, and a social-share icon strip for articles. 7 Pure CSS + 18 Light JS. Uses @container scroll-state(stuck:top), animation-timeline: scroll(), IntersectionObserver, and standard scroll listeners as appropriate per demo. Every design scoped under .sn-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).