Bootstrap Navbar 滚动时自动添加底部阴影

滚动时如何给导航栏添加阴影？

不少开发者会遇到这个问题：明明给导航栏加了box-shadow，但滚动时就是看不到阴影。原因其实很简单——导航栏通常是固定定位（position: fixed），它始终锚定在屏幕顶部，滚动时视觉上并没有产生“高度差”。阴影要能被感知，关键不是加不加，而是让浏览器明白它和下方内容发生了层叠。

最可靠的做法，是监听window.scrollY的变化。一旦滚动距离超过0，就给导航栏动态添加一个类（比如scrolled），然后通过CSS来控制阴影。这样既简洁又便于维护：

document.addEventListener('scroll', () => {
  const navbar = document.querySelector('.navbar');
  if (window.scrollY > 0) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});

直接改style.boxShadow？建议不要这么做，否则会覆盖其他CSS设置，也不利于后续调整。

Bootstrap 5的navbar需要额外处理z-index吗？

确实需要。Bootstrap 5默认给.navbar设了z-index: 1030，这个值在大多数场景下够用，但如果你页面里有轮播图、弹窗或者其他自定义header，它可能遮不住。加了阴影后被下方内容“吃掉”一部分，大概率是z-index不够高。

解决方案很直接，在你的CSS里覆盖一下：

.navbar.scrolled {
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  z-index: 1040; /* 比默认高一点即可 */
}

这里有几点要注意：

• 别设成9999或999999——后续其他组件（比如modal）可能依赖标准z-index层级，那样会破坏整体秩序
• 如果用了.navbar-expand-*类，需要确认该类没在响应式断点里重置z-index
• 移动端Safari有时对fixed + box-shadow的渲染有延迟，可以加transform: translateZ(0)强制硬件加速（仅在必要时使用）

为什么用scroll事件监听比IntersectionObserver更合适？

这个判断其实很直接：导航栏的状态变化只取决于“是否滚动过顶部”，而不是某个元素是否进入视口。在这种情况下，IntersectionObserver反而显得复杂且容易误判。比如页面初始就带hash锚点跳转，scrollY可能已经非零，但observer还没触发，就会出现状态不一致。

不过性能方面还是要留个心眼：

• 务必使用passive: true选项（现代浏览器默认支持，但显式声明更稳妥）
• 避免在回调里频繁读取offsetHeight或触发重排
• 如果项目用了React/Vue，记得在unmount时移除监听，防止内存泄漏

推荐一个更简洁的写法：

const handleScroll = () => {
  document.querySelector('.navbar').classList.toggle('scrolled', window.scrollY > 0);
};
window.addEventListener('scroll', handleScroll, { passive: true });

阴影看起来“浮”得不自然？检查这几个细节

有时候代码跑起来没问题，但视觉效果就是不对劲。常见的几个原因：

• box-shadow的第三个值（模糊半径）别超过12px，否则在小屏上显得脏乱
• 颜色用rgba(0,0,0,.08)而不是rgba(0,0,0,.3)——Bootstrap本身倾向轻量设计，太重的阴影会破坏整体观感
• 如果导航栏背景是纯白（bg-white），建议阴影配合一点点border-bottom（1px solid rgba(0,0,0,.05)）来强化分界感
• 使用transition: box-shadow .2s ease-in-out，否则阴影出现和消失会显得很生硬

真正容易被忽略的是：有些主题CSS会重置.navbar.scrolled的background-color，导致阴影被背景“吃掉”。遇到这种情况，优先检查computed styles里的background和box-shadow是否同时存在，问题往往就出在这里。