Navbar滚动时背景模糊变化的本质是通过监听scroll事件并用requestAnimationFrame动态设置backdrop-filter值实现的线性插值动画，而非CSS类切换或transition过渡。
Navbar 滚动时背景模糊变化的本质是 CSS filter 动态控制
Bootstrap 本身不提供滚动时动态调整 backdrop-filter 或 filter: blur() 的内置行为，所谓“变换模糊程度”必须手动监听 window.scrollY，计算滚动比例，再实时设置元素的 style.filter。直接改 Bootstrap 的 SCSS 变量或类（比如 .navbar）无法触发这种连续过渡——CSS 类只能切换离散状态，而模糊值（如 blur(0px) → blur(12px)）需要插值动画。
用 requestAnimationFrame + scroll 事件实现平滑 blur 过渡
关键不是“加 transition”，而是避免在 scroll 事件里直接设 style（会丢帧）。正确做法是节流 + requestAnimationFrame：
let ticking = false;
const navbar = document.querySelector('.navbar');
const maxBlur = 12; // 最大模糊像素值
function updateBlur() {
const scrollTop = window.scrollY;
const blur = Math.min(maxBlur, Math.max(0, scrollTop / 3)); // 每滚 3px 增加 1px 模糊
navbar.style.backdropFilter = `blur(${blur}px)`;
navbar.style.webkitBackdropFilter = `blur(${blur}px)`; // Safari 兼容
}
function handleScroll() {
if (!ticking) {
requestAnimationFrame(() => {
updateBlur();
ticking = false;
});
ticking = true;
}
}
window.addEventListener('scroll', handleScroll);
- 不要用
scroll里直接写navbar.style.filter = ...，会导致卡顿 -
backdrop-filter仅对半透明背景（background-color: rgba(...)）生效；纯色背景下 blur 不可见 - Safari 必须加
-webkit-backdropFilter，且需开启硬件加速（可加transform: translateZ(0)） - 如果 Navbar 用了
fixed定位，确保其父容器没设overflow: hidden，否则 backdrop 效果被裁剪
用 IntersectionObserver 替代 scroll 监听更轻量（适合简单阈值切换）
如果不需要连续模糊，只要“滚动过某位置后才启用 blur”，用 IntersectionObserver 更省资源：
const observer = new IntersectionObserver(
([entry]) => {
navbar.classList.toggle('blurred', !entry.isIntersecting);
},
{ threshold: 0.1, rootMargin: '-50px' }
);
observer.observe(document.querySelector('#trigger-point')); // 比如一个占位 div
然后在 CSS 里定义过渡：
.navbar {
backdrop-filter: blur(0px);
transition: backdrop-filter 0.3s ease;
}
.navbar.blurred {
backdrop-filter: blur(8px);
}
- 这种方式只支持两档切换（开/关），不能做滚动距离线性映射
- 比 scroll 监听性能好，尤其页面长、交互多时
-
rootMargin往上偏移（如'-50px'）可让 blur 提前触发，避免视觉延迟
常见失效原因：背景、层级与渲染限制
即使代码正确，blur 也可能不显示，多数卡在这几个点：
-
navbar的background-color是纯色（#fff），不是透明或半透（rgba(255,255,255,0.8)）——backdrop-filter对纯色无效 - Navbar 父容器有
overflow: hidden或clip-path，裁掉了 backdrop 渲染区域 - Chrome 旧版或某些移动端 WebView 不支持
backdrop-filter，需降级为opacity或渐变遮罩 - 开启了
will-change: transform但没配transform: translateZ(0)，导致 backdrop 渲染异常
模糊过渡真正难的不是写 JS，而是让 backdrop 在各种设备、各种嵌套结构里稳定出现——得一层层检查背景、溢出、合成层和浏览器支持表。
