导航栏初始透明带阴影，滚动超50px后变白加边框；用requestAnimationFrame节流监听scroll，通过.scrolled类控制样式，transition需定义在基础样式中，兼顾深色模式与移动端适配。
导航栏初始透明但有阴影，滚动后变白并加边框
直接给 .navbar 设 background-color: transparent 和 box-shadow: 0 2px 4px rgba(0,0,0,.1)，这是初始状态的关键。别用 rgba(255,255,255,0) 模拟透明——它会破坏 backdrop-filter 或导致 Safari 下阴影消失。透明状态下记得补上 border-bottom: 1px solid transparent，否则滚动后加实色边框时会出现跳动。
监听 scroll 事件判断是否超过阈值
不要用 window.onscroll 或频繁触发的 scroll 直接改样式——性能差且易抖动。用 requestAnimationFrame 节流，检测 window.scrollY > 50 即可（50 是防手滑误触发的经验值）。满足条件时给 <nav> 加一个类名如 scrolled，所有视觉变化交给 CSS 控制。
常见错误：在滚动回调里直接写 navbar.style.backgroundColor = '#fff'，这会覆盖 CSS transition，导致变色生硬；也容易和媒体查询、dark mode 冲突。
推荐做法：
立即学习“前端免费学习笔记（深入）”；
let ticking = false;
function updateNavbar() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
}
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
updateNavbar();
ticking = false;
});
ticking = true;
}
});
用 CSS transition 平滑过渡背景与阴影
transition 必须写在 .navbar 的基础样式里，不能只写在 .scrolled 中。否则首次加载时没有过渡效果。关键属性要明确列出，避免用 all（可能意外过渡 height 或 transform）。
示例：
.navbar {
background-color: transparent;
box-shadow: 0 2px 4px rgba(0,0,0,.1);
border-bottom: 1px solid transparent;
transition: background-color .3s ease, box-shadow .3s ease, border-bottom .3s ease;
}
.navbar.scrolled {
background-color: #fff;
box-shadow: 0 2px 12px rgba(0,0,0,.08);
border-bottom: 1px solid #e9ecef;
}
注意：box-shadow 的过渡在 Firefox 中有时不生效，可加 will-change: box-shadow 微调；移动端需确保 overflow-x: hidden 在 body 上，否则 iOS Safari 可能跳过 transition。
适配深色模式与移动端折叠菜单
如果用了 prefers-color-scheme: dark，.scrolled 状态下也要定义暗色版本，例如：
@media (prefers-color-scheme: dark) {
.navbar.scrolled {
background-color: #1a1a1a;
border-bottom-color: #333;
}
}
移动端折叠菜单（.navbar-collapse）展开时，若导航栏已 scrolled，但用户又滚回顶部，此时关闭菜单再滚动，容易因 DOM 重排导致背景闪烁。解决方法是：在 show.bs.collapse 和 hidden.bs.collapse 事件中强制重新计算 scrollY 并同步 class，或者干脆让折叠菜单始终脱离文档流（position: fixed）。
真正难处理的是粘性导航栏（position: sticky）+ 透明 + 滚动变色的组合——iOS Safari 对 sticky 元素的 transition 支持不稳定，建议降级为 position: fixed 并手动处理占位高度。
