vue-sticky-next
v1.0.0
Published
A powerful vue directive make element sticky.
Downloads
6
Maintainers
Readme
vue-sticky-next
vue-sticky-next is a powerful vue2 and vue3 directive make element sticky.
Install
npm install vue-sticky-next --save
Vue2 & Vue3 Plugin
import { vStickyPlugin } from 'vue-sticky-next'
Vue.use(vStickyPlugin)
createDirective API
import { createDirective } from 'vue-sticky-next'
const { vSticky } = createDirective(
{
/* default options */
},
'vue3' /* vue2 */
)
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.
<div sticky-container>
<div
v-sticky="{ offset: {
top:0
}, side:'top' }"
>
...
</div>
</div>
Options
v-sticky
Options:
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
)
side
(string) - decide which side should be sticky, you can settop
、bottom
orboth
(default:top
)zIndex
(number) - to set the z-index of element to stickonStick
(function) - callback when sticky and release, receiveing 1 argument with object indicating the state, like:
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