uni-app 中 position: sticky 跨端不可靠，微信/支付宝小程序及App端未实现该属性，H5需满足严苛条件；推荐用 scroll-view + bindscroll 动态控制 fixed 或使用 lime-sticky 插件，并配 JS fallback。
uni-app 里直接写 position: sticky 基本不可靠，真机上大概率失效——不是你代码写错了，是微信小程序、支付宝小程序、App 端压根没实现这个 CSS 属性。
为什么 position: sticky 在 uni-app 里经常“掉下来”
常见错误现象：sticky 在 H5 浏览器里看着正常，一换到微信小程序真机就完全不吸顶；iOS 微信里偶尔卡顿跳动；App 端（尤其 iOS）直接忽略样式。
- 微信/支付宝小程序：底层 WebView 不支持
position: sticky，无论你怎么加-webkit-sticky都白搭 - H5 环境：必须同时满足三个条件才可能生效——父容器不能有
transform、filter、overflow: hidden；元素自身不能是flex子项且align-self: stretch；必须显式写top: 0（top: auto或不写等于放弃） - App 端：iOS 使用 UIWebView（已弃用）或旧版 WKWebView，Android 各厂商 Webview 内核版本混乱，
sticky兼容性极差
用 scroll-view + bindscroll 动态控制 fixed 是最稳的跨端方案
核心思路是监听滚动位置，手动切换 header 的定位状态，绕过平台限制。这不是“退而求其次”，而是目前唯一能兼顾微信、支付宝、App、H5 四端的可靠路径。
- 必须给
scroll-view设置固定高度，比如height: 100vh或具体 px/rpx 值，否则bindscroll不触发 - 每个吸顶区块（如分类标题）要设唯一
id，例如id="section-0"，后续用uni.createSelectorQuery()查位置 - 不要用
scrollTop直接比对阈值——不同设备 DPR、系统字体缩放会导致像素误差，应查元素在视口内的top值 - 关键逻辑示例（Vue 2 写法）：
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();
});
}
然后在模板中用 :class="{ 'is-fixed': currentStickyIndex === 0 }" 控制样式，CSS 里定义 .is-fixed { position: fixed; top: 0; z-index: 990; }。
用插件 lime-sticky 可以省事但要注意边界
它封装了上述滚动监听逻辑，适合快速接入，但不是万能胶水。
- 必须通过 uni-app 插件市场安装，导入后需重新编译项目，否则组件不识别
-
l-sticky默认吸顶到页面顶部，若想吸顶到某个容器内（比如一个高 300px 的区域），必须套上l-sticky-box容器，并确保该容器有明确高度和overflow: hidden - 不支持嵌套滚动场景：如果页面已有
page级滚动，又在内部放scroll-view，l-sticky可能监听错滚动源，导致定位偏移 - 基础用法：
<l-sticky :offset-top="44"><view>导航栏</view></l-sticky>，其中offset-top单位是 px，不是 rpx
H5 下想用原生 sticky 必须加兜底逻辑
哪怕只跑 H5，也不能无脑信任 sticky。用户用老旧 Safari、开了字体放大、或页面结构稍复杂（比如用了 transform 做动画），它就会静默失效。
- 推荐写法：
.sticky-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 990; } - 务必检查 DOM 结构：吸顶元素的任意父级都不能有
transform、perspective、filter、will-change，这些会创建新层叠上下文，直接废掉sticky - 永远配一个 JS 版 fallback：用
window.addEventListener('scroll')监听，一旦检测到sticky失效（比如元素getBoundingClientRect().top > 0但已滚过临界点），立刻切到fixed模式
真正难的不是写出吸顶效果，而是判断什么时候该用 JS 动态控制、什么时候能信 CSS、以及在多端混排时怎么让它们不打架。很多问题直到提测阶段才暴露，因为开发者工具模拟不了真机的渲染引擎差异。
