vant/src/sticky

Sticky

Install

Register component globally via app.use, refer to Component Registration for more registration ways。

import { createApp } from 'vue';
import { Sticky } from 'vant';

const app = createApp();
app.use(Sticky);

Usage

Basic Usage

<van-sticky>
  <van-button type="primary">Basic Usage</van-button>
</van-sticky>

Offset Top

<van-sticky :offset-top="50">
  <van-button type="primary">Offset Top</van-button>
</van-sticky>

Set Container

<div ref="container" style="height: 150px;">
  <van-sticky :container="container">
    <van-button type="warning">Set Container</van-button>
  </van-sticky>
</div>

export default {
  setup() {
    const container = ref(null);
    return { container };
  },
};

Offset Bottom

<van-sticky :offset-bottom="50" position="bottom">
  <van-button type="primary">Offset Bottom</van-button>
</van-sticky>

API

Props

Attribute	Description	Type	Default
position v3.0.6	Offset position, can be set to bottom	string	top
offset-top	Offset top, supports px vw vh rem unit, default px	number | string	0
offset-bottom v3.0.6	Offset bottom, supports px vw vh rem unit, default px	number | string	0
z-index	z-index when sticky	number | string	99
container	Container DOM	Element	-

Events

Event	Description	Arguments
change v3.0.10	Emitted when sticky status changed	isFixed: boolean
scroll	Emitted when scrolling	{ scrollTop: number, isFixed: boolean }

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@sticky-z-index	99	-