基础吸顶(position: sticky + 默认偏移 = 导航栏高度:在框内滚动,标题条贴住导航栏下沿)

(占位:让吸顶条初始位于阈值下方,滚动 44px 后才贴合)
订单列表 · 共 6 条 9 月
20260920-001 · 已发货
20260920-002 · 待付款
20260919-014 · 已完成
20260919-013 · 已完成
20260918-007 · 已取消
20260918-006 · 已完成
20260917-003 · 已完成

滚动后标题条贴在导航栏下沿保持可见(sticky 不脱离文档流,因此无需补占位元素)

吸顶后出阴影(shadow=true:未吸顶时与内容齐平,贴合后才有投影)

(占位:让吸顶条初始位于阈值下方,滚动 44px 后才贴合)
分组:待处理
工单 #4821 · 待分派
工单 #4822 · 待分派
工单 #4823 · 处理中
工单 #4824 · 处理中
工单 #4825 · 待回访
工单 #4826 · 待回访

手动切换贴合态,可直接对照有/无阴影两种形态

安全区叠加(safeArea=true:偏移 = 容器偏移 + 刘海高度,无刘海时为 0px)

安全区吸顶(覆盖 offset=0)
覆盖 --kole-m-sticky-offset: 0px 后贴合在框顶
真实设备上再叠加 env(safe-area-inset-top)
顶部安全区为 0px 时与不带 safe 的表现一致
内容行 4
内容行 5

贴底吸顶(position=bottom:内容不足一屏时贴住框底,常用于底部合计条)

商品 1 · ¥128.00
商品 2 · ¥256.00
商品 3 · ¥64.00
合计 ¥448.00 已减 ¥12

带动作(右侧动作是原生 button,热区 44px;点击回传 action 由宿主处理)

收货地址
浙江省杭州市余杭区文一西路 969 号
收货人:张* | 138****8841
内容行 3
内容行 4
内容行 5