Navbar 滚动模糊效果需手写 scroll + requestAnimationFrame 逻辑实现，依赖 backdrop-filter（非 Bootstrap 原生），要求透明背景、伪元素承载背景图、避免 overflow: hidden 及 -webkit-overflow-scrolling，并注意 iOS 渲染兼容性。
Navbar 滚动时背景模糊变化依赖 CSS filter，不是 Bootstrap 原生功能
Bootstrap 本身不提供滚动中动态调整 backdrop-filter 或 filter: blur() 的内置类或 JS 行为。所谓“变换模糊程度”，本质是监听 window.scrollY，然后实时设置元素的 style.filter 值。Bootstrap 只负责结构和基础样式，这部分必须手写逻辑。
用 scroll 事件 + requestAnimationFrame 控制 blur 值
直接在 scroll 回调里改 style.filter 容易卡顿，必须节流。推荐用 requestAnimationFrame 配合缓存滚动值：
let lastScrollY = 0;
let ticking = false;
<p>function updateNavbarBlur() {
const navbar = document.querySelector('.navbar');
const scrollTop = window.scrollY;
// 模糊值随滚动线性增长，0～10px 滚动对应 blur(0)～blur(8px)
const blurPx = Math.min(8, Math.max(0, scrollTop * 0.8));
navbar.style.backdropFilter = <code>blur(${blurPx}px)</code>;
// 注意：backdrop-filter 兼容性有限（Chrome 79+、Safari 9+、Firefox 117+），旧版 Firefox 不支持
}</p><p>function handleScroll() {
lastScrollY = window.scrollY;
if (!ticking) {
requestAnimationFrame(() => {
updateNavbarBlur();
ticking = false;
});
ticking = true;
}
}</p><p>window.addEventListener('scroll', handleScroll);
-
backdrop-filter作用于透明背景的 Navbar 才可见效果；若background-color不透明，blur 会被遮盖 - 别用
filter: blur()—— 它模糊的是整个 Navbar 元素（含文字、图标），而backdrop-filter只模糊背后内容，更符合“背景图模糊”预期 - 滚动距离映射到 blur 值时，建议用
Math.min/max限幅，避免过大的模糊导致文字不可读
背景图需设为 navbar::before 伪元素才可被 backdrop-filter 影响
如果直接把背景图设在 .navbar 上，backdrop-filter 对它无效 —— 因为 backdrop-filter 只对“元素背后的区域”生效，不是自身内容。正确做法是：
.navbar {
background-color: rgba(255, 255, 255, 0.8); /* 半透底色 */
backdrop-filter: blur(0); /* 初始不模糊 */
-webkit-backdrop-filter: blur(0); /* Safari 兼容 */
}
<p>.navbar::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('bg.jpg');
background-size: cover;
z-index: -1;
}
-
::before必须设z-index: -1，确保它在 Navbar 内容之下、但又在 backdrop-filter 的“背后区域”内 - Navbar 容器本身不能有
overflow: hidden，否则::before可能被裁剪 - 如果用了
fixed定位，::before的背景图可能随页面滚动——加background-attachment: fixed可固定背景，但注意性能开销
移动端 Safari 的 backdrop-filter 渲染异常常见
iOS 15.4+ 虽支持 backdrop-filter，但常出现模糊失效、闪烁或白屏。关键规避点：
- 确保
.navbar有明确的height或min-height，避免 Safari 计算渲染层失败 - 禁用
-webkit-overflow-scrolling: touch（已废弃但部分老项目残留），它会干扰 backdrop-filter - 不要在
::before上叠加多个filter或transform，iOS 对复合渲染层处理不稳定 - 测试时真机优先——模拟器常无法复现 Safari 的渲染 bug
复杂点在于：blur 值不是简单线性插值就能自然，滚动速度、设备像素比、甚至系统“减少透明度”开关都会影响最终观感。调参得靠反复真机验证，而不是只看代码逻辑。
