A powerful vue directive make element sticky.
Branch: master
Clone or download
Latest commit d29705d Jan 28, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples/basic feat: close #10, #11 Dec 7, 2018
src Fix a potential error when resetElement (#15) Jan 28, 2019
.eslintrc.js Init commit. Aug 16, 2017
.gitignore chroe: update .gitignore Sep 28, 2017
.npmignore Init commit. Aug 16, 2017
README.md feat: close #10, #11 Dec 7, 2018
package.json 0.0.8 Jan 28, 2019
rollup.config.js Init commit. Aug 16, 2017



vue-sticky-directive is a powerful vue directive make element sticky.


npm install vue-sticky-directive --save


// register globally
import Sticky from 'vue-sticky-directive'

// or for a single instance
import Sticky from 'vue-sticky-directive'
new Vue({
  directives: {Sticky}


Use v-sticky directive to enable element postion sticky, and use sticky-* attributes to define its options. Sticky element will find its nearest element with sticky-container attribute or its parent node if faild as the releative element.

basic example

<div sticky-container>
  <div v-sticky sticky-offset="offset" sticky-side="top">


  • sticky-offset
    • top(number) - set the top breakpoint (default: 0)
    • bottom(number) - set the bottom breakpoint (default: 0)
  • sticky-side(string) - decide which side should be sticky, you can set topbottom or both (default: top)
  • sticky-z-index (number) - to set the z-index of element to stick
  • on-stick (function) - callback when sticky and release, receiveing 1 argument with object indicating the state, like:
// The element is sticked on top
  bottom: false,
  top: true,
  sticked: true

An expression that evaluates to false set on v-sticky can be used to disable stickiness condtionally.

<div sticky-container>
  <div v-sticky="shouldStick">
export defaults {
  data () {
    shouldStick: false