vue-sticky-directive-ts

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 set top,bottom or both (default: top)
• zIndex(number) - to set the z-index of element to stick
• on (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
}

License

MIT