用 scroll-view + bindscroll 是全端唯一稳解，因小程序不支持 position: sticky，H5 易受父容器样式影响；需设固定高度、占位元素、防抖回调及独立状态管理。
直接用 position: sticky 实现多层筛选菜单吸顶，90% 的场景会失效——不是写法错，是小程序平台根本不支持该 CSS 属性，H5 也极易因父容器样式中断。
为什么 sticky 在多层筛选菜单里大概率挂掉
多层筛选菜单（比如「分类→品牌→价格区间→标签」）通常由多个 uni-data-select、uni-popup 或自定义 scroll-view 组成，结构嵌套深、高度不固定。这种情况下：
-
sticky要求父容器不能有transform、filter、will-change，但 uni-app 的页面容器默认带transform: translateZ(0)（为 GPU 加速），直接废掉 sticky - 小程序渲染层（微信/支付宝/百度）压根没实现
position: sticky，查 DOM 的getComputedStyle都返回static - 多层弹出层（如二级 popup 打开时）会让滚动上下文混乱，
sticky的参照系丢失
scroll-view + bindscroll 是唯一稳解
把整个筛选区域和列表内容都包进一个 scroll-view，监听其滚动，手动控制吸顶状态。这是目前全端（小程序/H5/App）唯一可预测的方案。
- 必须给
scroll-view设固定高度，例如height: calc(100vh - var(--status-bar-height) - 44px)（减去导航栏） -
offsetTop要在onReady或nextTick后取，否则uni.createSelectorQuery().select('.filter-bar').boundingClientRect()返回top: 0 - 吸顶后原位置留空：加一个占位
- 防抖滚动回调：用
requestAnimationFrame包一层，别直接在bindscroll里改isFixed，否则 iOS 卡顿明显
多层联动筛选器如何与吸顶共存
吸顶只管“视觉固定”，但筛选逻辑必须独立维护状态，否则弹层关闭后值丢失或联动错乱。
- 每层筛选项（如分类、品牌）用独立响应式字段，例如
filterForm.category = []、filterForm.brand = ''，别共用一个数组 - 二级弹窗（如品牌列表）打开时，
bindscroll仍要继续监听——别在弹窗显示时暂停滚动监听，否则吸顶状态不同步 - 点击筛选项后触发
uni.pageScrollTo({ scrollTop: 0 })，但要加duration: 0（iOS 滚动到顶有延迟），否则用户看到“先吸顶再跳回顶部”的撕裂感 - 清空按钮逻辑必须区分层级：点「重置全部」清空所有字段；点某一层的「×」只清该层，保留其他已选条件
别踩这些坑
多层筛选 + 吸顶组合下，最容易被忽略的是状态同步时机和滚动上下文隔离。
- 在
onPageScroll里取scrollTop是错的——它监听的是页面滚动，而你用了scroll-view，必须用@scroll="onScroll"监听组件内滚动 - 用
uni-popup弹品牌列表时，如果没设safe-area-inset-bottom，iOS 键盘顶起会导致弹层错位，吸顶栏也被挤偏 - 不要在吸顶逻辑里调用
uni.createSelectorQuery()多次，一次查询多个节点，exec()只调一次 - H5 端若用原生
select渲染某一层，它的z-index会穿透吸顶栏，得额外加style="position: relative; z-index: 1000;"
