Sticky Bar
粘性悬浮栏
Floats along with document flow until reaching viewport boundaries where it pins persistently.
Live Demo
Actually clickableConfigure build settings and environmental variables before deployment.
Automated continuous integration triggers static SSG exports.
What you just saw:A frosted glass top navigation bar that snaps to the top edge as you scroll down a lengthy landing page, or a sticky checkout action anchored securely to the bottom of a mobile commerce page.
What it actually is
Sticky Bars rely on CSS position: sticky to preserve natural document flow while ensuring high-intent navigation or CTAs remain pinned once scrolled past. Unlike position: fixed, sticky elements naturally push preceding siblings without jarring content overlaps, seamlessly docking frosted headers or mobile checkout triggers.
Anatomy · What it's made of
Sticky Anchor粘性定位锚点
Position sticky with top-0 or bottom-0 pinning to viewport edge
Backdrop Blur毛玻璃半透层
Translucent surface with blur filter keeping background readable
Scroll Shadow滚动感知微投影
Subtle elevation shadow appearing dynamically on scroll
Action Elements核心操作控件
Brand logo, quick navigational anchors, or high-intent CTAs
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Global navigation headers on long-scroll marketing pages | Yes |
| Persistent mobile checkout bars and add-to-cart actions on product pages | Yes |
| Bottom action confirmation bars on lengthy configuration forms | Yes |
| Short single-fold landing pages where pinning adds no functional value | No |
| Containers where ancestor elements have overflow-hidden (breaks sticky behavior) | No |
Placing sticky elements inside parent containers configured with overflow: hidden.
Designing excessively tall sticky bars that consume excessive mobile viewport height.
Similar Patterns
Don't mix these upSticky BarCurrent
粘性悬浮栏
Floats along with document flow until reaching viewport boundaries where it pins persistently.
Sidebar App Shell
应用侧栏架构
Classic application shell pairing a persistent navigation rail with an independently scrolling canvas.
In one line:Floats along with document flow until reaching viewport boundaries where it pins persistently.
Sidebar App Shell
应用侧栏架构
Classic application shell pairing a persistent navigation rail with an independently scrolling canvas.
Hero Section
首屏焦点区
The primary above-the-fold spotlight communicating headline value and primary calls to action.
Container
版心
Constrains page width and centers content to prevent overly long lines on wide displays.
Full-Bleed Section
全宽通栏带
Breaks container constraints to stretch edge-to-edge, injecting contrast and spatial pacing.
How to tell AI
Three levels of promptAdd the component name and specifics
Create a sticky frosted glass navigation bar: pinned at top (sticky top-0), 80% white translucent background with 12px backdrop blur, subtle border bottom, elevated with micro shadow on scroll.
Don't just say this to AI
Bad → BetterDon't say this to AI
Keep the menu floating at the top.
Say this instead
Implement a sticky frosted header: sticky top-0 z-40 w-full backdrop-blur-md bg-surface/85 border-b border-line/60, ensure parent overflow is visible, and cast subtle elevation upon scroll.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.