vant/src/sticky

Sticky

Install

import Vue from 'vue';
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 v2.8.7	Offset top, supports px vw vh rem unit, default px	number | string	0
z-index	z-index when sticky	number | string	99
container	Container DOM	Element	-

Events

Event	Description	Arguments
change v2.12.13	Emitted when sticky status changed	isFixed: boolean
scroll	Emitted when scrolling	{ scrollTop: number, isFixed: boolean }

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@sticky-z-index	99	-