uni-app吸顶效果实现：粘性布局sticky

uni-app 中 position: sticky 跨端不可靠，微信/支付宝小程序及App端未实现该属性，H5需满足严苛条件；推荐用 scroll-view + bindscroll 动态控制 fixed 或使用 lime-sticky 插件，并配 JS fallback。

如果你在 uni-app 项目里直接使用 position: sticky 来实现吸顶效果，大概率会遇到一个令人困惑的局面：在 H5 浏览器里调试一切正常，但一到微信小程序或 App 真机上，效果就“掉链子”了。这通常不是你的代码写错了，而是因为微信小程序、支付宝小程序以及 App 端的底层渲染引擎，压根就没有完整实现这个 CSS 属性。

为什么 position: sticky 在 uni-app 里经常“掉下来”

开发者常遇到的几种现象：在 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 是最稳的跨端方案

那么，有没有一种方案能通吃所有平台呢？答案是肯定的。核心思路是放弃对原生 CSS 属性的依赖，转而通过监听滚动位置，动态切换元素的定位状态。这并非“退而求其次”，而是目前唯一能同时兼顾微信小程序、支付宝小程序、App 及 H5 端的可靠技术路径。

具体实施时，有几个关键点需要注意：

• 必须为 scroll-view 组件设置一个固定的高度，例如 height: 100vh 或具体的像素值，否则其 bindscroll 事件将无法被触发。
• 页面中每个需要吸顶的区块（例如分类标题），都应该设置一个唯一的 id，如 id="section-0"，以便后续通过 uni.createSelectorQuery() API 来查询它的位置信息。
• 在判断吸顶时机时，不建议直接使用 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 可以省事但要注意边界

如果觉得手动实现滚动监听逻辑比较繁琐，可以考虑使用社区插件 lime-sticky。它封装了上述的核心逻辑，适合需要快速接入的场景。但需要注意的是，它并非万能解决方案，使用时有一些明确的边界条件。

• 必须通过 uni-app 官方插件市场进行安装。导入组件后，记得重新编译运行项目，否则组件可能无法被正确识别。
• l-sticky 组件默认会将元素吸顶至页面顶部。如果希望元素在某个特定容器内部（例如一个高度为 300px 的区域）吸顶，则必须将其包裹在 l-sticky-box 容器内，并确保该容器具有明确的高度和 overflow: hidden 样式。
• 它不支持复杂的嵌套滚动场景。例如，如果页面本身存在 page 级别的滚动，又在内部嵌套了 scroll-view，l-sticky 可能会监听错误的滚动事件源，导致定位出现偏差。
• 基础用法示例：导航栏，这里的 offset-top 单位是 px，而不是 uni-app 常用的 rpx。

H5 下想用原生 sticky 必须加兜底逻辑

即便你的应用只面向 H5 端，也不应毫无保留地信任 sticky 属性。当用户使用老版本的 Safari 浏览器、开启了系统字体放大功能，或者页面结构稍显复杂（例如使用了 transform 制作动画）时，sticky 都可能静默失效，且不报任何错误。

• 推荐的 CSS 写法是：.sticky-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 990; }，同时兼顾前缀和标准属性。
• 务必仔细检查 DOM 结构：吸顶元素的任何一级父元素，都不能设置 transform、perspective、filter、will-change 等属性，因为这些属性会创建新的层叠上下文，从而直接导致 sticky 定位失效。
• 永远准备一个 Ja vaScript 实现的降级方案（fallback）：通过 window.addEventListener('scroll') 监听滚动事件。一旦检测到 sticky 失效（例如，通过 getBoundingClientRect().top 发现元素本应吸顶却仍随页面滚动），就立即切换到使用 position: fixed 的 JS 控制模式。

说到底，在 uni-app 中实现一个健壮的吸顶效果，真正的难点不在于写出 CSS 或 JS 代码，而在于准确判断何时该依赖 CSS，何时必须启用 JS 动态控制，以及在多端混合开发时，如何让不同平台的解决方案和谐共处，互不冲突。许多潜在问题在开发者工具的模拟器中无法显现，直到真机测试阶段才会暴露，这正是由于各平台底层渲染引擎的差异所导致的。