hackur / vue-sticky-js

Vue.js directive to make sticky elements built on sticky-js

vue-sticky-js

🏏 Vue.js directive to make sticky elements built with sticky-js

⚠️ Vue.js 2 is not supported yet. [WIP]

Prerequisites

Vue.js

Installation

$ npm i -S vue-sticky-js

Directive

v-sticky => Define a new sticky element.

Implementation

Global

main.js

import Vue     from 'vue';
import VueSticky from 'vue-sticky-js';

Vue.use(VueSticky.install);

// ...

Component.vue

<script>
  export default {
    name: 'Component',

    data() {
      return {
        stickyOptions: {
          marginTop: 20,
          forName: 0,
          className: 'stuck'
        }
      };
    }

  };
</script>

<template lang='pug'>
  .container
    .box(v-sticky='stickyOptions') //- stickyOptions are not mandatory
      p Sticky Element
</template>

Component

Component.vue

<script>
  import { stickyDirective } from 'vue-sticky-js';

  export default {
    name: 'Component',

    directives: {
      s: stickyDirective // You can name it as you want.
    }

  };
</script>

<template lang='pug'>
  .container
    .box(v-s) //- stickyOptions are not mandatory
      p Sticky Element
</template>

Development Setup

# install dependencies
$ npm install

# dev mode
$ npm run dev

# test
$ npm run test

# build
$ npm run build

This project was built with yeoman and generator-vue-component ❤️