Sticky sticky layout

Introduced

Sticky components work in the same way as theposition: sticky property in CSS, which are arranged in a normal layout when the component is within the screen range and always pinned to the top of the screen when the component rolls out of the screen range.

Introduced

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

Vue.use(Sticky);

Code demo

Basic usage

Wrap content within the Sticky component

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

Ceiling distance

The offset-top property allows you to set the distance between the component and the top when it is capped

<van-sticky :offset-top="50">
  <van-button type="info">吸顶距离</van-button>
</van-sticky>

Specify the container

The container property specifies the container of a component, which remains within the scope of the container as the page scrolls, and is pinned to the bottom of the container when the component is about to exceed the bottom of the container

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

export default {
  data() {
    return {
      container: null
    };
  },
  mounted() {
    this.container = this.$refs.container;
  }
};

Api

Props

Events