A powerful vue directive make element sticky.
npm install vue-sticky-directivevue-sticky-directive is a powerful vue directive make element sticky.
``Bash`
npm install vue-sticky-directive --save
ES2015
`JavaScript
// register globally
import Sticky from 'vue-sticky-directive'
Vue.use(Sticky)
// 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.
`HTML`
...
- set sticky offset, it support a vm variable name or a js expression like {top: 10, bottom: 20}
* _(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 top、bottom 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:`javascript
// The element is sticked on top
{
bottom: false,
top: true,
sticked: true
}
`An expression that evaluates to false set on
can be used to disable stickiness condtionally.`HTML
...
`
JavaScript
export defaults {
data () {
shouldStick: false
}
}
``MIT