vue-sticky-directive is a powerful vue directive make element sticky.
npm install vue-sticky-directive --save
ES2015
// 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.
<div sticky-container>
<div v-sticky sticky-offset="offset" sticky-side="top">
...
</div>
</div>
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
)
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
}
}
MIT