NAVIGATION
吸顶模糊导航Sticky Blur Header
导航栏固定在顶部，背景半透明 + 高斯模糊，页面内容从它下面滚过时透出模糊的影子。
效果预览
适合用在哪
几乎所有现代网站的主导航。长页面尤其需要。
容易踩的坑
- 背景透明度低于 60% 时，下方滚过的图片会让导航文字对比度骤降。
- 页面锚点跳转未设 scroll-margin-top，目标标题被 72px 吸顶导航遮住。
- backdrop-filter 在 Firefox 旧版或低端安卓上不生效，需给出不透明背景兜底。
设计提示词 · Prompt
吸顶模糊导航（Sticky Blur Header）：position:sticky; top:0，高度 56-72px。背景 rgba(255,255,255,.6-.75) 配合 backdrop-filter:blur(14px) saturate(1.8)。底部 1px 极浅描边（不透明度 60% 的白色或 rgba(0,0,0,.06)），滚动后出现轻微投影。左侧 Logo（字重 750、字距 -0.02em），中间导航项（14px、当前项 600 字重 + 深色），右侧主 CTA 按钮。导航项悬停时有一个 2px 下划线从左向右展开的动画。
Sticky Blur Header: position:sticky; top:0, height 56-72px. Background rgba(255,255,255,.6-.75) combined with backdrop-filter:blur(14px) saturate(1.8). A 1px very light bottom stroke (white at 60% opacity or rgba(0,0,0,.06)), with a subtle shadow appearing after scrolling. Logo on the left (font-weight 750, letter-spacing -0.02em), nav items in the middle (14px; the current item at 600 weight + dark color), primary CTA button on the right. On hover, nav items show a 2px underline that expands from left to right.
常见搭配
同一页面里经常和「吸顶模糊导航」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-navblur">
<div class="d-navblur__page">
<div class="d-navblur__art"></div>
<div style="height:7px;width:82%;border-radius:99px;background:rgba(255,255,255,.75)"></div>
<div style="height:7px;width:64%;border-radius:99px;background:rgba(255,255,255,.6)"></div>
<div style="height:7px;width:74%;border-radius:99px;background:rgba(255,255,255,.5)"></div>
</div>
<div class="d-navblur__bar">
<span class="d-navblur__logo">◆ Nova</span>
<span class="d-navblur__link is-on">产品</span>
<span class="d-navblur__link">定价</span>
<span class="d-navblur__link">文档</span>
<span class="d-spacer"></span>
<button class="d-btn d-btn--p d-btn--sm">免费试用</button>
</div>
</div>