滚动时如何实现底层模糊？固定顶栏覆盖主页面的模糊效果实现

云上老周

2026-8-26

实现fixed顶部栏覆盖区域的页面模糊效果

核心思路是利用CSS的backdrop-filter属性，给fixed定位的顶部栏添加背景模糊效果，这和Twitter的实现逻辑一致，具体步骤和代码如下：

实现步骤

给顶部栏设置fixed定位，确保它悬浮在页面最上层
添加backdrop-filter: blur(数值px)属性，实现背后内容的模糊
配合半透明背景色，让模糊效果更柔和自然

代码示例

HTML结构

<header class="top-bar">
  <!-- 顶部栏内容，比如导航、logo等 -->
</header>
<main class="main-content">
  <!-- 页面滚动内容 -->
</main>

CSS样式

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  /* 核心：模糊背后的页面内容 */
  backdrop-filter: blur(8px);
  /* 半透明白色背景，增强模糊层次感（和Twitter风格匹配） */
  background-color: rgba(255, 255, 255, 0.8);
  /* 可选：添加轻微阴影，区分顶部栏和页面层级 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* 确保顶部栏在最上层 */
  z-index: 100;
}

.main-content {
  /* 给顶部栏预留空间，避免页面内容被遮挡 */
  margin-top: 60px;
}