vue-sticky-directive-ts
v0.0.17
Published
A powerful vue directive make element sticky.
Downloads
23
Maintainers
Readme
vue-sticky-directive-ts
vue-sticky-directive-ts is a powerful vue directive make element sticky and fork of vue-sticky-directive
Install
Using npm:
npm install vue-sticky-directive-ts --save
Using yarn:
yarn add vue-sticky-directive-ts
ES2015
// register globally
import Sticky from 'vue-sticky-directive-ts'
Vue.use(Sticky)
Usage
Use v-sticky
directive to enable element postion sticky. 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="{
topOffset: 0,
bottomOffset: 0,
side: 'top',
zIndex: 10,
on: () => {}
}">
...
</div>
</div>
In styles set position for sticky-container
.
[sticky-container] {
position: relative;
}
Options
topOffset
(number) - set the top breakpoint offset (default:0
)bottomOffset
(number) - set the top breakpoint offset (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 stickon
(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
}