Sticky 粘性布局

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

基础用法

将内容包裹在 Sticky 组件内即可。

  1. <van-sticky>
  2.   <van-button type="primary">基础用法</van-button>

指定容器

通过 container 属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会固定在容器的底部。

  1. <div ref="container" style="height: 150px;">
  2.   <van-sticky :container="container">
  3.     <van-button type="warning">指定容器</van-button>
  4.   </van-sticky>
  5. </div>

吸底距离

将 设置为 bottom 可以让组件吸附在底部。通过 offset-bottom 属性可以设置组件在吸底时与底部的距离。

  1. <van-sticky :offset-bottom="50" position="bottom">
  2.   <van-button type="primary">吸底距离</van-button>

Events

类型定义

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。