Directive not update width calculations or orientationchange event triggered when element is affixed

[7iomka]

trafficstars

Hi! Thank you for awesome wrapper) currently i cannot fix one problem. If the item is in the "affixed" state and the orientationchange event fires (the user rotates the phone) then the element does not change its size. It will not even change its size if we scroll to the moment when it becomes static, and then scroll again so that it locks in - it will get the old width again. For the recount to take place, I noticed that we need to translate it into a static state and only then do the orientationchange. In other words, callbacks for recalculation of sizes do not work if the orientationchange occurs when the element is already "affixed". I don’t know how to fix it. I tried this.$el._stickySidebar.updateSticky(); but it doesn’t help I can shoot a video demonstrating my problem if it necessary.

[netaneld122]

Have a similar issue. My sticky container's width is relative to the window's width (which may change). The sticky element maintains the same width it had when affix-top was fired first.

So if you stick it, and then resize the window (to change the container's width), there's a width mismatch.

@renatodeleao any quick fixup? :)

[renatodeleao]

Hey! sry for being the silent about this. To be 100% honest, i didn't use this in a while myself so i'm kind of out of loop.

Since this is a wrapper, and as @7iomka reported calling update methods doesn't solve the problem we might be looking at an issue of the underlying library, which is kind of a bottleneck since it doesn't seem to be maintained anymore.

That being said:

• If you don't use the scroll-past-and-affix behaviour like you see in the docs, I recommend either moving to native position: sticky (complementing with a sticky events library) or a more maintained vue sticky directive => https://github.com/mehwww/vue-sticky-directive
• A vue codesandox with the a reproduction example could be helpful for debugging (more than a video)
• I don't have much time right now, since i've have new full-time gig, so don't expect a shot-term fix (hence the alternative suggestion).

Thanks for even giving a shot at this! Cheers! ☮️ ✌️

[netaneld122]

Update: So I tried using the https://github.com/mehwww/vue-sticky-directive library, which apparently works perfectly with every resizing quirk I tried out of the box.

The only thing that made me not use it in the first place was a broken README usage example that didn't seem to work, but following the example they provided did work.

So if anyone is experiencing problems with resizing, the official vue-sticky-directive seems to solve those.