vant/src/sticky

Sticky

Install

import { Sticky } from 'vant';

Vue.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="info">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 {
  data() {
    return {
      container: null
    };
  },
  mounted() {
    this.container = this.$refs.container;
  }
};

API

Props

Attribute	Description	Type	Default
offset-top	Offset top	number	0
z-index	z-index when sticky	number	99
container	Container DOM	HTMLElement	-

Events

Event	Description	Arguments
scroll	Triggered when scroll	object: { scrollTop, isFixed }