uni-app 中 position: sticky 无效是因为微信、支付宝、App 等平台不支持该属性，H5 下也受限于浏览器版本和父容器样式；推荐用 scroll-view + bindscroll 动态控制 fixed 状态实现跨端兼容吸顶。
uni-app 中 position: sticky 为什么无效
因为多数小程序平台（微信、支付宝、app）不支持 position: sticky，h5 环境下也受限于基础库和浏览器版本——不是写法错，是底层压根没实现。
常见错误现象：sticky 在开发者工具里看着正常，真机一跑就“掉下来”；或者 iOS 微信里卡顿、跳动、完全不吸顶。
- 微信小程序：仅
scroll-view内部的scroll-y区域 +scroll-into-view配合可模拟，原生sticky被忽略 - H5：需检查是否父容器有
transform、filter或will-change，这些会创建新层叠上下文，导致sticky失效 - App（iOS/Android）：uni-app 编译为原生 App 时，Webview 内核版本低（尤其 iOS UIWebView 已弃用），
sticky兼容性极差
用 scroll-view + scroll-into-view 模拟吸顶
这是目前最稳定、跨端兼容的做法，核心思路是监听滚动，动态控制 header 的 fixed 状态，而非依赖 CSS。
使用场景：商品列表页、通讯录、课程分类页等需要「分类标题悬停」的长列表。
- 必须给
scroll-view设置固定高度（如height: 100vh），否则无法触发bindscroll - 每个吸顶区块（如
category-title）需设唯一id，例如id="cate-1" - 在
bindscroll回调中，用uni.createSelectorQuery()获取各标题的top值，判断是否到达视口顶部 - 不要直接用
scrollTop做阈值判断——不同设备 dpr、字体缩放会导致像素偏移，应以元素实际位置为准
示例关键逻辑：
onScroll(e) {
const scrollTop = e.detail.scrollTop;
this.$nextTick(() => {
uni.createSelectorQuery()
.selectAll('.sticky-title')
.boundingClientRect(res => {
if (!res || !res.length) return;
res.forEach((rect, i) => {
if (rect && rect.top <= 0 && rect.bottom > 0) {
this.currentStickyIndex = i;
}
});
})
.exec();
});
}
sticky 在 H5 上能用但要加兜底
H5 环境下 position: sticky 可以工作，但必须满足三个硬性条件，缺一不可。
- 父容器不能有
overflow: hidden、transform、perspective等属性（它们会截断粘性行为） - 吸顶元素自身不能是
flex子项且align-self: stretch（某些 Safari 版本会失效） - 必须显式设置
top值（如top: 0），设top: auto或不设等于放弃吸顶
建议写法：
.sticky-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 990;
background: #fff;
}
注意：iOS Safari 15.4+ 才修复了 sticky 在 scroll-view 内部的 bug，旧版仍需降级方案。
别踩「用 fixed + pageYOffset 手动计算」的坑
有人试图用 window.addEventListener('scroll', ...) + getBoundingClientRect() 动态切 fixed，这在 H5 可行，但在小程序里根本监听不到全局 scroll 事件——scroll-view 的滚动不会触发 window.onscroll。
- 微信小程序中，
window.onscroll完全无效，只能监听scroll-view的bindscroll - App 平台若用 webview 加载，
pageYOffset可能始终为 0（尤其启用了pullToRefresh） - 频繁修改
fixed状态会引发重排，列表滚动卡顿，尤其低端 Android 机
真正省事又稳的方式，是把吸顶逻辑收束到 scroll-view 生命周期内，用 scroll-into-view 控制焦点，或用 ref + offsetTop 做轻量判断——别绕远路。
吸顶不是样式问题，是滚动上下文问题。跨端时，优先信 runtime 的能力边界，而不是 CSS 规范。
