滚动页面时动态改变元素高度的实现问题

我之前做项目时刚好遇到过一模一样的需求，折腾了几次终于搞定了，给你分享一套亲测有效的实现方案：

核心思路 #

我们需要三个核心元素：

• 承载实际内容的容器
• 复制内容的模糊背景容器（高度随滚动动态调整，底部始终贴合视口）
• 顶部固定的菜单（背景透明/半透明，让模糊效果透出来）

通过JS监听滚动事件，实时计算模糊容器的高度，同时用CSS实现模糊效果和层级控制，就能达到你要的菜单模糊背景效果。

完整代码实现 #

HTML结构 #

<!-- 实际内容容器 -->
<div class="content-container">
  <h2>页面标题</h2>
  <p>这是一段测试内容，用来模拟页面滚动时的效果。</p>
  <p>更多测试内容... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>继续添加内容，让页面可以滚动... Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <!-- 可以继续添加更多内容，确保页面能滚动 -->
</div>

<!-- 模糊背景容器（初始为空，通过JS复制内容） -->
<div class="blur-bg-container"></div>

<!-- 顶部菜单 -->
<nav class="top-menu">
  <ul>
    <li>首页</li>
    <li>文章</li>
    <li>关于我</li>
  </ul>
</nav>

CSS样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 给顶部菜单留出空间，避免内容被遮挡 */
  padding-top: 60px;
  background-color: #f5f5f5;
}

/* 实际内容容器：正常布局，控制宽度和内边距 */
.content-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
  background-color: #fff;
  line-height: 1.6;
}

.content-container h2 {
  margin-bottom: 16px;
  color: #333;
}

.content-container p {
  margin-bottom: 12px;
  color: #666;
}

/* 模糊背景容器：绝对定位，和内容容器尺寸/位置完全匹配 */
.blur-bg-container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 900px;
  width: 100%;
  padding: 24px;
  overflow: hidden;
  /* 禁止交互，避免干扰原内容的点击/选择 */
  pointer-events: none;
  /* 模糊效果，可根据需求调整数值 */
  filter: blur(10px);
  /* 层级在菜单和原内容之间 */
  z-index: 1;
}

/* 顶部菜单：固定在顶部，层级最高 */
.top-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  /* 半透明背景，让模糊效果更自然 */
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 2;
}

.top-menu ul {
  display: flex;
  list-style: none;
  gap: 32px;
}

.top-menu li {
  color: #333;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.top-menu li:hover {
  color: #007bff;
}

JavaScript逻辑 #

// 获取DOM元素
const contentContainer = document.querySelector('.content-container');
const blurBgContainer = document.querySelector('.blur-bg-container');

// 第一步：把原内容复制到模糊容器里
blurBgContainer.innerHTML = contentContainer.innerHTML;

// 第二步：监听滚动事件，动态调整模糊容器高度
function updateBlurBgHeight() {
  // 计算视口底部的位置：滚动距离 + 视口高度
  const viewportBottom = window.scrollY + window.innerHeight;
  // 获取原内容容器的顶部距离页面顶端的位置
  const contentTop = contentContainer.offsetTop;
  
  // 模糊容器的高度 = 视口底部位置 - 内容容器顶部位置（不能小于0）
  const blurHeight = Math.max(viewportBottom - contentTop, 0);
  
  // 设置模糊容器的高度
  blurBgContainer.style.height = `${blurHeight}px`;
}

// 初始化时执行一次，确保初始高度正确
updateBlurBgHeight();

// 监听滚动事件
window.addEventListener('scroll', updateBlurBgHeight);

关键细节说明 #

1. 内容复制：通过innerHTML直接复制原内容，确保模糊容器和原内容完全一致；如果原内容是动态生成的，记得在内容更新后重新执行复制逻辑。
2. 层级控制：通过z-index确保菜单在最上层，模糊容器在中间，原内容在最下层，这样菜单能透出模糊效果，同时不影响原内容的交互。
3. pointer-events: none：这个属性非常重要，它能让模糊容器不拦截任何鼠标事件，保证用户能正常点击原内容。
4. 模糊效果调整：可以修改filter: blur()的数值，数值越大模糊程度越高，根据视觉需求调整即可。

你可以直接把这段代码复制到本地测试，滚动页面就能看到菜单下方的模糊背景始终跟随视口变化啦～

内容的提问来源于stack exchange，提问作者prius