Skip to content
Vue directive that supports top and bottom sticky base on pure js and vue.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
examples/basic
src
.eslintrc.js
.gitignore
.npmignore
LICENSE
README.md
README_CN.md
package.json
rollup.config.js

README.md

vuejs-sticky-directive

Support top and bottom sticky base on pure js and vue.

Build Status Github starts License License

📑中文文档

Install

npm install vue-sticky-directive --save

ES2015

// register globally
import Sticky from 'vuejs-sticky-directive'
Vue.use(Sticky)

// or for a single instance
import Sticky from 'vuejs-sticky-directive'
new Vue({
  directives: {Sticky}
})

Usage

  • Use v-sticky directive to enable element postion sticky
  • 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
    • 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 topbottom or both (default: top)
<div sticky-container>
  <div v-sticky sticky-offset="offset" sticky-side="both">
    ...
  </div>
</div>
export defaults {
  data () {
    offset: {
      top: 0, // set the top breakpoint
      bottom: 44 // set the bottom breakpoint
    }
  }
}

On/off switch

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

Reference/Source

Base on the package mehwww/vue-sticky-directive, this package fixed the bugs exist in the original package and also provide the continuous support.

Vue-stick-directive

You can’t perform that action at this time.