backdrop-filter 动态生效需配合透明背景，移除固有色类、设 background-color: transparent 或低 alpha rgba；伪元素承载背景图；scroll 回调须用 requestAnimationFrame 节流；过渡用 background-color 的 rgba 变化而非 opacity；移动端应监听 navbar.getBoundingClientRect().top 判断位置。
backdrop-filter 动态设置必须配合透明背景才生效
直接给 .navbar 加 backdrop-filter: blur(5px) 却看不到模糊效果？大概率是背景不透明。backdrop-filter 只对「元素背后的内容」起作用，如果 .navbar 自身有 solid 背景色（比如 background-color: #fff），它就完全遮住了后面的内容，blur 就成了摆设。
必须确保：
- 移除 .navbar-light 或 .navbar-dark 这类强制设背景色的类
- 显式声明 background-color: transparent 或 background-color: rgba(255, 255, 255, 0)
- 若需轻微底色提升文字可读性，用 rgba(255, 255, 255, 0.08) 这类极低 alpha 值，而非纯白
另外，别把背景图直接写在 .navbar 上——backdrop-filter 对它无效。正确做法是用 ::before 伪元素承载背景图，并确保该伪元素也继承透明背景。
滚动时 blur 值要节流更新，不能直写 scroll 回调
在 window.addEventListener('scroll', () => { navbar.style.backdropFilter = `blur(${value}px)` }) 里直接改样式，容易触发高频重绘，尤其在 iOS Safari 上明显卡顿。
用 requestAnimationFrame 节流是实际可行的底线：
let ticking = false;
function updateBlur() {
const scrolled = window.scrollY;
const blur = Math.min(10, Math.max(0, scrolled / 6));
navbar.style.backdropFilter = `blur(${blur}px)`;
}
function handleScroll() {
if (!ticking) {
requestAnimationFrame(updateBlur);
ticking = true;
}
}
window.addEventListener('scroll', handleScroll);注意：
- 除数 6 控制模糊增长速度，数值越小越敏感
- Math.min/max 限幅防止过大的 blur 导致视觉失控
- 不要用 filter: blur() 替代 —— 它会模糊文字和图标，不是“背景模糊”
透明度变化别用 opacity，优先走 background-color 的 rgba 过渡
给 .navbar 设 opacity: 0.8 看似简单，但会让内部所有内容（.nav-link、.navbar-brand）同步变淡，可读性骤降。
真正可控的做法是：
- 初始状态：
background-color: rgba(255, 255, 255, 0) - 滚动后状态：
background-color: rgba(255, 255, 255, 0.92) - CSS 中写：
transition: background-color 0.3s ease, backdrop-filter 0.3s ease
这样只影响背景层，文字颜色保持原样。同时注意：
- transition 必须写在默认状态（未滚动时）的 CSS 规则里，否则动画不触发
- 别写 transition: all，它会干扰 z-index 或 height 等无关属性的变更
- 深色主题下，对应改为 rgba(33, 37, 41, 0.92)
移动端滚动判断别依赖 window.scrollY
在 iOS Safari 或某些安卓 WebView 中，window.scrollY 经常恒为 0 —— 因为页面滚动实际发生在 <main> 或 .container 这类容器上，而非 document.body。
更可靠的判断方式是监听 Navbar 自身位置：
const navbar = document.querySelector('.navbar');
function checkNavbarPosition() {
const rect = navbar.getBoundingClientRect();
const isStuck = rect.top <= 0;
navbar.classList.toggle('navbar-scrolled', isStuck);
}
window.addEventListener('scroll', checkNavbarPosition);这个方法不依赖全局滚动值，也不受父容器 overflow 设置干扰。顺便提醒：
- 如果用了 position: sticky，确保其父容器没有 overflow: hidden
- getBoundingClientRect().top 在 SSR 渲染或 hydration 前可能返回 NaN，加个 if (rect.top !== undefined) 更稳妥
- 别在 scroll 回调里反复调用 getBoundingClientRect()，它触发 layout，性能开销大；上面示例已是最简调用
模糊值和透明度的映射关系本身不复杂，难的是让它们在各种设备、各种滚动上下文里稳定响应。最常被忽略的不是 JS 写法，而是 CSS 层级干扰 —— 比如某个第三方组件偷偷给 .navbar 加了 !important 背景色，或者父容器设置了 overflow: hidden 直接切断 backdrop-filter 的渲染路径。
