返回项目日志
kuailu-blog ·

全局导航栏毛玻璃浮动及响应式重构

为了提升页面深滚时的菜单可达性，将顶部导航栏重构为 position: sticky 浮动。整合了 color-mix 与 backdrop-filter: blur(16px) 磨砂玻璃效果，并为首页量身定制了从透明过渡到模糊悬浮的动态感知逻辑。

Git Commit: e9b23f8

今日工作内容：

  1. 粘性定位机制：

    • 将常规页面的 <header> 从静态布局重构为 position: sticky; top: 0; z-index: 100。
    • 优化了 z-index 堆叠上下文，确保正文标题和代码高亮块在向上滑动时正确遮挡在导航栏下方。

  2. 毛玻璃磨砂（Glassmorphism）视觉特效：

    • 引入 color-mix(in oklch, var(--color-canvas) 85%, transparent)，确保背景既有极强的材质感，又能透出下方滚过的文字色彩轮廓。
    • 启用了 backdrop-filter: blur(16px)。

  3. 首页特殊行为（Transparent to Blurred Sticky）：

    • 首页 Header 默认采用 fixed 透明叠加在首屏大图上。
    • 编写监听脚本，当页面垂直滚动高度（window.scrollY）大于 20px 时，触发 .header-scrolled 动画，平滑淡入毛玻璃与阴影；回滚至顶部时自动淡出，保持首页首屏的高级统一美感。