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
scroll	Emitted when scrolling	object: { scrollTop, isFixed }

Less Variables

How to use: Custom Theme.

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