Sticky-kit plugin for Vue.js

Sticky-kit

Sticky-kit is a JQuery plugin that provides an easy way to attach elements to the page when the user scrolls so that the element is always visible.

This is a Vue.js (v2.x+) integration of such plugin.

More info at http://leafo.net/sticky-kit/

Installation

Install the npm module.

bash

npm install vue-stickykit --save

Register the component.

javascript

// ES5
var Vue = require('vue')
var VueStickyKit = require('vue-stickykit')
Vue.use(VueStickyKit)
javascript

// ES6
import Vue from 'vue'
import VueStickyKit from 'vue-stickykit'
Vue.use(VueStickyKit)

Basic usage

markup

<template>
    <div v-stick-in-parent>
        My sticky content
    </div>
</template>

Custom options and events

markup

<template>
    <div v-stick-in-parent="stikyKit">
        My sticky content
    </div>
</template>
javascript

export default {
    data () {
      return {
        // See http://leafo.net/sticky-kit/#reference
        stikyKit: {
          options: {
            parent: '.my-sticky-class',
            offset_top: 50
          },
          on: {
            'sticky_kit:stick': function(e) {
              console.log("has stuck!", e.target);
            },
            'sticky_kit:unstick': function(e) {
              console.log("has unstuck!", e.target);
            },
          }
        }
      }
    },
}