vant/src/sticky

Sticky

Intro

The Sticky component has the same effect as the position: sticky property in CSS. When the component is within the screen range, it will be arranged according to the normal layout. When the component rolls out of the screen, it will always be fixed at the top of the screen.

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	-