滚动时为固定flex布局的Header添加底部阴影方案咨询

由于.header-wrapper的CSS不可修改且必须保留display:flex，可以通过动态添加类+CSS阴影/伪元素的方式实现需求，完全不影响原有布局：

方案1：直接使用box-shadow（最简单） #

新增滚动状态的CSS类，利用box-shadow实现底部阴影：

/* 滚动后添加的阴影类 */
.header-wrapper.scrolled {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  /* 可选：如果原header无底部padding，可加小量padding避免内容贴阴影 */
  /* padding-bottom: 8px; */
}

通过JavaScript监听滚动距离，动态切换类：

window.addEventListener('scroll', () => {
  const header = document.querySelector('.header-wrapper');
  // 滚动超过50px时触发阴影，可自行调整阈值
  header.classList.toggle('scrolled', window.scrollY > 50);
});

方案2：伪元素实现渐变阴影（更灵活） #

如果需要渐变阴影效果，用伪元素定位在header底部，不影响原有内容：

.header-wrapper.scrolled::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent);
  z-index: -1; /* 确保伪元素在header内容下方，不遮挡 */
}

使用和方案1相同的JavaScript代码即可。

原理说明 #

• 原.header-wrapper的position: sticky和display:flex完全保留，不会影响原有元素布局
• 通过动态类切换阴影状态，不修改原有CSS规则
• 两种方案都利用了header的sticky定位特性，阴影会始终跟随header显示在页面顶部下方

内容的提问来源于stack exchange，提问作者Katia S.