直接加 shadow-sm 滚动时无反应，因该类为静态样式且 navbar 需设 position: fixed 或 sticky 才能随滚动生效；需用 js 监听 scroll 事件动态增删类，并注意 overflow、背景透明度及深色模式适配。
为什么直接加 shadow-sm 滚动时没反应
不是类写错了，是 Bootstrap 的 .navbar 默认不监听滚动行为——shadow-sm 是静态类，加了就一直有，不会随 window.scrollY 动态切换。更关键的是，如果 .navbar 没设 position: fixed 或 sticky，它根本不动，自然谈不上“滚动时加阴影”。另外，常见干扰包括：box-shadow: none !important 覆盖、background: transparent 导致阴影不可见、父容器 overflow: hidden 把阴影裁掉。
用 JavaScript 动态增删 shadow-sm 类最轻量
不需要框架或复杂库，几行原生 JS 就够。核心是监听 scroll 事件，根据 window.scrollY 是否超过阈值（比如 10px）来决定是否加类：
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 10) {
navbar.classList.add('shadow-sm');
} else {
navbar.classList.remove('shadow-sm');
}
});
-
shadow-sm比shadow更适合导航栏，阴影柔和不突兀 - 阈值设为
10而非0，避免页面刚加载就触发，也防止小幅度抖动误判 - 不用
requestAnimationFrame包裹——普通导航栏滚动频率低，没必要过度优化 - 确保
.navbar已有position: fixed或position: sticky，否则 JS 逻辑生效但视觉无变化
想控制阴影深度？改 CSS 变量比写 !important 干净得多
Bootstrap 5 用 CSS 自定义变量管理阴影，改 --bs-box-shadow-sm 就能统一影响所有 shadow-sm 元素，包括 .navbar：
:root {
--bs-box-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
}
- 原生值是
0 1px 2px 0 rgba(0, 0, 0, 0.05)，调高第三项（模糊半径）和第四项（透明度）可加深效果 - 只针对
.navbar改？可用.navbar.shadow-sm { box-shadow: ... }，但会绕过变量体系，后续维护成本更高 - 深色模式下，
rgba(0,0,0,0.08)在暗背景上可能发灰，建议配合@media (prefers-color-scheme: dark)单独调整
底部投影要显眼？别依赖 shadow-sm，直接写带垂直偏移的 box-shadow
shadow-sm 的偏移是 0，没有方向感，人眼很难识别“底部”效果。真正要突出底部投影，得手动写 CSS：
.navbar-bottom-shadow {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
- 第一个
0是水平偏移，保持居中；第二个2px是垂直偏移（正值向下），让阴影只落在下方 - 用
rem单位更稳妥：0 0.125rem 0.375rem rgba(0,0,0,0.08)，适配缩放和响应式高度变化 - 必须确保
.navbar的overflow是visible（默认就是），否则阴影会被父容器裁掉 - 如果用了
.navbar-expand或外层.container，检查它们是否设了overflow: hidden——这是阴影消失最常见的隐藏原因
.navbar 真的在动，再谈加影子。
