Navbar 滚动模糊效果需手动监听 scroll 事件并用 requestAnimationFrame 动态设置 backdropFilter，依赖 fixed-top 定位、半透明背景及浏览器支持，Firefox 需手动启用，线性映射可优化为缓动函数提升体验。
Navbar 滚动时背景模糊变化依赖 CSS filter，不是 Bootstrap 原生功能
bootstrap 本身不提供滚动时动态调整 backdrop-filter 或 filter: blur() 的 js 行为。你看到的效果一定是手动监听 window.scrolly，然后动态设置元素的 style.backdropfilter 或 style.filter。别在 navbar 类或 data-bs-* 属性里找开关——它不存在。
用 scroll 事件 + requestAnimationFrame 控制 blur 值更平滑
直接在 scroll 事件里改样式容易卡顿。正确做法是用 requestAnimationFrame 节流，并把模糊值映射到滚动距离：
let lastScroll = 0;
const navbar = document.querySelector('.navbar');
const maxBlur = 8; // px
<p>function updateBlur() {
const scrolled = window.scrollY;
// 滚动前 100px 内线性增加 blur，之后保持最大值
const blur = Math.min(maxBlur, scrolled / 12.5); // 100 / 8 ≈ 12.5
navbar.style.backdropFilter = <code>blur(${blur}px)</code>;
}</p><p>window.addEventListener('scroll', () => {
if (lastScroll !== window.scrollY) {
lastScroll = window.scrollY;
requestAnimationFrame(updateBlur);
}
});-
backdrop-filter需要background-color半透明（如rgba(255,255,255,0.8)）才能生效，纯透明背景看不到模糊 - Chrome/Safari 支持
backdrop-filter，Firefox 默认禁用（需用户开启layout.css.backdrop-filter.enabled） - 若要兼容 Firefox 或旧浏览器，改用
filter: blur()作用于 navbar 自身（但会模糊文字和图标，体验差）
Navbar 必须设为 fixed-top 才能稳定触发滚动监听
如果 navbar 是 static 或 relative 定位，滚动时它随文档流移动，window.scrollY 和视觉变化不同步，blur 值会“滞后”或跳变。
- 确保 class 包含
fixed-top（Bootstrap 5）或position-sticky（慎用，sticky 在父容器高度不足时失效） - 给
<body>加padding-top: 56px（对应 navbar 高度），避免页面内容被遮挡 - 如果用了
sticky-top，注意它只在 viewport 内生效，且父容器不能有overflow: hidden
blur 值突变明显？试试 easing 曲线而非线性映射
线性增长（scrolled / 12.5）会让模糊感在开头太急、后面太平。用简单缓动函数更自然：
const easeInQuad = t => t * t; // t ∈ [0,1] const progress = Math.min(1, scrolled / 100); // 0→1 over first 100px const blur = easeInQuad(progress) * maxBlur;
- 避免用
Math.sin()或复杂贝塞尔——滚动距离不是周期信号，硬套反而失真 - 调试时临时加
console.log(blur.toFixed(1))看输出是否符合预期节奏 - 移动端 touchmove 事件默认不触发 scroll，需确保
overscroll-behavior: contain不阻断事件冒泡
真正难的是 blur 值和滚动距离的感知匹配：人眼对前 20px 模糊变化最敏感，超过 6px 后差异就很小了。调参时盯着真实手机看，别只信 DevTools 里的数字。
