滚动时给navbar添加阴影需监听scroll事件，当window.scrolly>0时动态添加.scrolled类，再用css设置box-shadow和z-index（如1040），并配合transition实现平滑效果，避免直接修改style.boxshadow或滥用z-index。
滚动时如何给 navbar 添加阴影？
直接加 box-shadow 不行——默认 navbar 是固定定位（position: fixed），滚动时它始终在顶部，但阴影需要「有高度差」才能被视觉感知。关键不是加不加，而是让浏览器知道「它和下方内容发生了层叠」。
最可靠的做法是监听 window.scrollY，当滚动距离 > 0 时，给 navbar 动态添加一个类（比如 scrolled），再用 CSS 控制阴影：
document.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 0) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
注意：不要用 scroll 事件直接改 style.boxShadow，否则会覆盖 CSS 中的其他 shadow 设置，也不利于维护。
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 更合适？
因为 navbar 的状态变化只取决于「是否滚动过顶部」，而不是某个元素是否进入视口。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 本身倾向轻量设计 - 如果 navbar 背景是纯白（
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 是否同时存在。
