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

Sticky \u7C98\u6027\u5E03\u5C40

\u4ECB\u7ECD

Sticky \u7EC4\u4EF6\u4E0E CSS \u4E2D position: sticky \u5C5E\u6027\u5B9E\u73B0\u7684\u6548\u679C\u4E00\u81F4\uFF0C\u5F53\u7EC4\u4EF6\u5728\u5C4F\u5E55\u8303\u56F4\u5185\u65F6\uFF0C\u4F1A\u6309\u7167\u6B63\u5E38\u7684\u5E03\u5C40\u6392\u5217\uFF0C\u5F53\u7EC4\u4EF6\u6EDA\u51FA\u5C4F\u5E55\u8303\u56F4\u65F6\uFF0C\u59CB\u7EC8\u4F1A\u56FA\u5B9A\u5728\u5C4F\u5E55\u9876\u90E8\u3002

\u5F15\u5165

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

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

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

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u5C06\u5185\u5BB9\u5305\u88F9\u5728 Sticky \u7EC4\u4EF6\u5185\u5373\u53EF\u3002

<van-sticky>
  <van-button type="primary">\u57FA\u7840\u7528\u6CD5</van-button>
</van-sticky>

\u5438\u9876\u8DDD\u79BB

\u901A\u8FC7 offset-top \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u7EC4\u4EF6\u5728\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\u3002

<van-sticky :offset-top="50">
  <van-button type="primary">\u5438\u9876\u8DDD\u79BB</van-button>
</van-sticky>

\u6307\u5B9A\u5BB9\u5668

\u901A\u8FC7 container \u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u7EC4\u4EF6\u7684\u5BB9\u5668\uFF0C\u9875\u9762\u6EDA\u52A8\u65F6\uFF0C\u7EC4\u4EF6\u4F1A\u59CB\u7EC8\u4FDD\u6301\u5728\u5BB9\u5668\u8303\u56F4\u5185\uFF0C\u5F53\u7EC4\u4EF6\u5373\u5C06\u8D85\u51FA\u5BB9\u5668\u5E95\u90E8\u65F6\uFF0C\u4F1A\u56FA\u5B9A\u5728\u5BB9\u5668\u7684\u5E95\u90E8\u3002

<div ref="container" style="height: 150px;">
  <van-sticky :container="container">
    <van-button type="warning">\u6307\u5B9A\u5BB9\u5668</van-button>
  </van-sticky>
</div>

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

\u5438\u5E95\u8DDD\u79BB

\u5C06 position \u8BBE\u7F6E\u4E3A bottom \u53EF\u4EE5\u8BA9\u7EC4\u4EF6\u5438\u9644\u5728\u5E95\u90E8\u3002\u901A\u8FC7 offset-bottom \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u7EC4\u4EF6\u5728\u5438\u5E95\u65F6\u4E0E\u5E95\u90E8\u7684\u8DDD\u79BB\u3002

<van-sticky :offset-bottom="50" position="bottom">
  <van-button type="primary">\u5438\u5E95\u8DDD\u79BB</van-button>
</van-sticky>

API

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
position `v3.0.6`	\u5438\u9644\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A `bottom`	string	`top`
offset-top	\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\uFF0C\u652F\u6301 `px` `vw` `vh` `rem` \u5355\u4F4D\uFF0C\u9ED8\u8BA4 `px`	number \| string	`0`
offset-bottom `v3.0.6`	\u5438\u5E95\u65F6\u4E0E\u5E95\u90E8\u7684\u8DDD\u79BB\uFF0C\u652F\u6301 `px` `vw` `vh` `rem` \u5355\u4F4D\uFF0C\u9ED8\u8BA4 `px`	number \| string	`0`
z-index	\u5438\u9876\u65F6\u7684 z-index	number \| string	`99`
container	\u5BB9\u5668\u5BF9\u5E94\u7684 HTML \u8282\u70B9	Element	-

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
change `v3.0.10`	\u5F53\u5438\u9876\u72B6\u6001\u6539\u53D8\u65F6\u89E6\u53D1	isFixed: boolean
scroll	\u6EDA\u52A8\u65F6\u89E6\u53D1	{ scrollTop: number, isFixed: boolean }

\u7C7B\u578B\u5B9A\u4E49

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

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

\u4E3B\u9898\u5B9A\u5236

\u6837\u5F0F\u53D8\u91CF

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\u540D\u79F0	\u9ED8\u8BA4\u503C	\u63CF\u8FF0
--van-sticky-z-index	99	-

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