vuejs-sticky-directive
Support top and bottom sticky base on pure js and vue.
Install
npm install vue-sticky-directive --save
ES2015
// register globally
import Sticky from 'vuejs-sticky-directive'
Vue.use(Sticky)
// or for a single instance
import Sticky from 'vuejs-sticky-directive'
new Vue({
directives: {Sticky}
})
Usage
- Use
v-sticky
directive to enable element postion sticky - 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.
<div sticky-container>
<div v-sticky sticky-offset="offset" sticky-side="top">
...
</div>
</div>
Options
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 settop
γbottom
orboth
(default:top
)
<div sticky-container>
<div v-sticky sticky-offset="offset" sticky-side="both">
...
</div>
</div>
export defaults {
data () {
offset: {
top: 0, // set the top breakpoint
bottom: 44 // set the bottom breakpoint
}
}
}
On/off switch
An expression that evaluates to false set on v-sticky
can be used to disable stickiness condtionally.
<div sticky-container>
<div v-sticky="shouldStick">
...
</div>
</div>
export defaults {
data () {
shouldStick: false
}
}
License
MIT
Reference/Source
Base on the package mehwww/vue-sticky-directive
, this package fixed the bugs exist in the original package and also provide the continuous support.