Dynamic stickyOffset

[jan-vodila]

Hello,

first of all, thanks for very good plugin. I really like it and using it a lot :)

Anyway, I have one minor feature request which would be really nice to have. You can now pass to stickyOffset attribute only an object with top and bottom properties as Number. Is there any option to change those offsets on the fly, let's say on resize? Or maybe pass a function/method/computed to stickyOffset which would be called by your plugin?

Use case: I have a header element, which change it's height in responsive version, so I would like to add an event listener, like this:

mounted() {
    window.addEventListener('resize', () => {
        this.stickyOffset = {
            top: this.getHeaderHeight,
            bottom: 0
        }
    });
}

Thanks for any help.

Regards, Jan

[Somethingideally]

@mehwww, i also need this. Can you help us?

[Gayoushie]

I also have a use case where i need this. For different screen sizes i need a different offset top, and haven't been able to find a work around.

[mehwww]

Sorry but it seems difficult to detect stickyOffset attribute change cause it's not bind to directive. A workaround is set a key which relative to your offset value to your component and force it remount.

[stygmate]

+1 Also need this ! please reopen the issue !

[ghost]

+1 I desperately need this on my app as well.

[justwiebe]

I know the name is vue-sticky-DIRECTIVE, but I think this could have a lot more options as a component. Then you could use actual props, which are reactive. Otherwise, I suppose instead of attributes you could have the v-sticky accept an object with the parameters instead. I believe that would be reactive

[simplenotezy]

I need this as well!

[simplenotezy]

it's an imporant feature as most likely the offset will be different from mobile and desktop.

[bashunaimiroy]

This would also be appreciated for sticky-z-index

[parcelz]

Hey Guys,

I figured out a little hack that can help setting the sticky offset dynamically

<div class="sticky" v-sticky="isSticky" :sticky-offset="stickyOffset" sticky-side="bottom" ref="stickyElement" ></div>

add a ref atrribute to you sticky element. Then you can set the offset attributes dynamically with

this.$refs['stickyElement'][ '@@vue-sticky-directive'].options.bottomOffset = 45; this.$refs['stickyElement'][ '@@vue-sticky-directive'].options.topOffset = 45;

[bashunaimiroy]

thank you! it feels a little hacky, but I think I understand why it's necessary