/*! For license information please see 8507.3bc5d2dd.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["8507"],{74434:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Sticky

\n

Intro

\n

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.

\n

Install

\n

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

\n
import { createApp } from 'vue';\nimport { Sticky } from 'vant';\n\nconst app = createApp();\napp.use(Sticky);\n
\n

Usage

\n

Basic Usage

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

Offset Top

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

Set Container

\n
<div ref="container" style="height: 150px;">\n  <van-sticky :container="container">\n    <van-button type="warning">Set Container</van-button>\n  </van-sticky>\n</div>\n
\n
export default {\n  setup() {\n    const container = ref(null);\n    return { container };\n  },\n};\n
\n

Offset Bottom

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

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
positionOffset position, can be set to bottomstringtop
offset-topOffset top, supports px vw vh rem unit, default pxnumber | string0
offset-bottomOffset bottom, supports px vw vh rem unit, default pxnumber | string0
z-indexz-index when stickynumber | string99
containerContainer DOMElement-
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
changeEmitted when sticky status changedisFixed: boolean
scrollEmitted when scrolling{ scrollTop: number, isFixed: boolean }
\n

Types

\n

The component exports the following type definitions:

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

Theming

\n

CSS Variables

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-sticky-z-index99-
\n
'},null,8,e))}}}]);