vue-sticky-directive

vue-sticky-directive is a powerful vue directive make element sticky.

Install

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} })

Usage

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.

basic example

<div sticky-container>   <div v-sticky sticky-offset="offset" sticky-side="top">     ...   </div> </div>

Options

• sticky-offset - set sticky offset, it support a vm variable name or a js expression like {top: 10, bottom: 20}
  • 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 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:

// The element is sticked on top {   bottom: false,   top: true,   sticked: true }

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