在 uni-app 中实现跨端可用的吸顶商品筛选导航，必须用 scroll-view + @scroll 监听 + 动态 fixed 控制，并配合 swiper 实现横向滑动；position: sticky 因小程序未支持及 H5 兼容性差而不可靠。
直接说结论：在 uni-app 里实现带吸顶效果的可滑动商品筛选导航，不能依赖 position: sticky，必须用 scroll-view + @scroll 监听 + 动态 fixed 控制，再配合 swiper 做横向滑动导航栏才真正跨端可用。
为什么 position: sticky 在筛选导航上基本无效
不是你 CSS 写错了，是微信/支付宝/百度小程序压根没实现这个属性；H5 端即使看着正常，真机滚动时也极易“掉下来”——原因包括父容器有 overflow: hidden、用了 transform、或子元素是 flex 且 align-self: stretch。更关键的是：筛选导航通常嵌套在页面头部区域，上方可能有自定义导航栏或状态栏，sticky 的 top 计算会直接错乱，导致吸顶位置偏移甚至遮挡内容。
scroll-view + @scroll 是唯一稳的吸顶方案
核心逻辑是监听滚动位置，手动切换导航栏的定位状态。必须注意以下几点：
- 给
scroll-view设置固定高度，例如height: calc(100vh - var(--status-bar-height) - 44px)（减去状态栏和自定义导航栏高度），否则@scroll事件不触发 -
offsetTop必须在onReady或nextTick后通过uni.createSelectorQuery()获取，onMounted中 DOM 可能还没渲染完，直接取值为 0 - 吸顶后内容会上跳，必须加一个占位
<view class="placeholder"></view>，高度等于筛选栏的rpx高度（建议用getComputedStyle动态读取） - 避免在
@scroll回调里频繁调用uni.createSelectorQuery()或getComputedStyle()—— 它们是同步阻塞操作，会导致卡顿甚至丢帧 - 用
requestAnimationFrame节流，防止高频滚动反复触发重排
横向滑动导航栏别用 scroll-view，改用 swiper
商品筛选导航常含多个分类标签（如“全部”“家电”“手机”“电脑”），需要左右滑动浏览。此时用 scroll-view 加 scroll-x 会出问题：
- iOS 上手指一松就回弹，安卓偶现跳帧
- 快速滑动时标签错位、切换后位置丢失
- 根本原因是
scroll-view把导航当“连续滚动”处理，但筛选标签本质是“离散选项”，不该依赖滚动精度
正确做法是：swiper 设置 :scrollable="false" 禁用手动滑动，只靠 :current 控制高亮项；点击标签时更新 current，同时用 scroll-view 的 scroll-into-view 或 scrollTop 联动滚动到对应商品区块。
点击筛选条件后要回到顶部？别只调 uni.pageScrollTo
很多实现只写 uni.pageScrollTo({ scrollTop: 0 })，但在 scroll-view 内部滚动时完全无效——因为页面本身没滚动，滚动的是 scroll-view。正确做法是：
- 给
scroll-view设ref="scrollView" - 点击筛选项后执行
this.$refs.scrollView.scrollTop = 0（Vue 2）或this.scrollViewRef.scrollTop = 0（Vue 3 +ref绑定） - 如果需带动画，用
scroll-view的scroll-top属性 +transition，或封装一个带duration的平滑滚动函数 - 注意：iOS 真机下
scrollTop惯性滚动末期有 ±15px 抖动，建议设为-1或1再加requestAnimationFrame微调一次，避免视觉残留
最易被忽略的一点：筛选栏吸顶后，用户点击某个二级分类（比如“iPhone 15”），不仅要滚动到对应商品区块，还要确保该区块的锚点坐标是“吸顶后的视口坐标”，而不是初始文档坐标——这意味着锚点查询必须在吸顶状态稳定后（比如 setTimeout 30ms 或 nextTick）再执行，否则会定位偏移。
