import{o as a,a as t,y as n}from"./vue-libs.b44bc779.js";const e={class:"van-doc-markdown-body"},l=n(`

Sticky

Intro

The sticky component is consistent with the effect achieved by the position: sticky property in CSS, in that when the component is within screen range, it will follow the normal layout arrangement, and when the component rolls out of screen range, it will always be fixed at the top of the screen.

Install

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 }

Types

The component exports the following type definitions:

import type { StickyProps, StickyPosition } from 'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

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

`,14),p=[l],h={__name:"README",setup(o,{expose:s}){return s({frontmatter:{}}),(d,i)=>(a(),t("div",e,p))}};export{h as default};