Sticky

演示

Sticky 跨端示例与演示

滚动页面查看月份摘要吸顶

2026 年 5 月8 笔订单

跟随页面

#1042已发货

¥279

#1041已完成

¥168

#1040待付款

¥99

#1039已完成

¥428

#1038已退款

−¥68

#1037已完成

¥319

#1036已完成

¥86

#1035已完成

¥206

跟随页面 · 页面滚动 0px

基础用法

<template>
  <VSticky>
    <div class="sticky-bar">吸顶区域</div>
  </VSticky>
</template>

顶部偏移

<template>
  <VSticky :offset-top="12" :z-index="10">
    <div class="sticky-bar">距离顶部 12px</div>
  </VSticky>
</template>

监听状态

<template>
  <VSticky @change="fixed => console.log(fixed)" @scroll="event => console.log(event)">
    <div class="sticky-bar">吸顶区域</div>
  </VSticky>
</template>

Props

Prop	类型	默认值	描述
offsetTop	number | string	0	吸顶时距离顶部的距离
zIndex	number | string	undefined	层级
disabled	boolean	false	是否禁用吸顶行为

Events

Event	Payload	描述
change	boolean	固定状态变化
scroll	{ isFixed: boolean; scrollTop: number }	页面滚动时触发

Slots

Slot	描述
default	吸顶内容，slot props 包含 fixed

Primitives

Sticky 有滚动状态和事件，因此 H5 / Weapp 均提供 StickyRoot primitive；Divider、Grid、Layout、Space 是静态布局展示组件，直接在 UI 层实现。