Vue component, that helps to make sticky effects

# install component
npm install --save-dev vue-sticker

import VueSticker from 'vue-sticker'

...
    components: { VueSticker }

import VueSticker from 'vue-sticker'
import Vue from 'Vue'

Vue.use(VueSticker)

After installing you can use vue-sticker component in your templates:

<VueSticker :d="300"></VueSticker>

Describe your styles in component where you use vue-sticker by three elements: wrapper, main-image and backside-image.

Illustrate case when you set main-image, but backside is just color

<VueSticker :d="200" className="good" />

.good

    &__wrapper

        &:focus
            box-shadow: 0 0 5px 10px rgba(0, 0, 0, .4)

    &__main-image
        background-image: url('your-image.png')

    &__backside-image
        background-color: lighgray
        opacity: .4

<VueSticker :d="200" className="example" prefix="--" />

In this case we skip wrapper just for example. Usually wrapper styles need to add :hover and :focus for your component. But it's not must have.

.example--main-image {
    background-image: url('example.png');
}

.example--backside-image {
    background-image: url('back.png');
}

Vue-sticker always generate event, that indicate number from 0 to 1 of sticky complition. When user get down of sticker it will be 1.

To handle this event you just need add your method in your parent component and subscribe on event getPercent in vue-sticker component.

<VueSticker :d="400" @getPercent="doSomething" />

And set your method in parent component, for example we use percent:

...
doSomething(value) {
    this.percentOfComplition = value * 100;
}

Maxim Chagin — 17$