1.0.6 • Published 5 years ago
vue-stickykit v1.0.6
Sticky-kit plugin for Vue.js
A Vue.js(v2.x+) integration of http://leafo.net/sticky-kit/
See also https://imfaber.me/lab/sticky-kit-plugin-vuejs
Installation
Install the npm package.
$ npm install vue-stickykit --save
Register the component.
- ES5
var Vue = require('vue')
var VueStickyKit = require('vue-stickykit')
Vue.use(VueStickyKit)
- ES6
import Vue from 'vue'
import VueStickyKit from 'vue-stickykit'
Vue.use(VueStickyKit)
Usage
Basic Sticking
<template>
<div v-stick-in-parent>
My sticky content
</div>
</template>
Custom Sticking
<template>
<div v-stick-in-parent="stikyKit">
My sticky content
</div>
</template>
<script>
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);
},
}
}
}
},
}
</script>
License
The code is available under the MIT license.