destroy() not working

[artonomic]

Normally I would disable the sticky sidebar for smaller screens (< 992px) by using the "minWidth" option, but I would like to try something different with the destroy function. I have created a fiddle to demonstrate the issue.

https://jsfiddle.net/kynham79/

You will notice that the sticky sidebar is disabled when the document is loaded, and when you resize above 992px it will stick as expected. Once you resize back below 992px, the sticky sidebar should be disabled, but it throws an error. Watch the console.

[vstruhar]

Seems that you need to initialise your sidebar variable outside, so it can be accessed from the scope where you call destroy().

[electronicdreamer]

I had a problem with my destroy related to Vue 3 as version 3 uses proxies for everything.

Sticky sidebar makes use of the handleEvent function, which is the reason why the whole class is passed to the addEventListener but in Vue's case, when I called the destroy function, it called it on the proxy and not the real this so it couldn't unbind the event.

So I rewrote some of the code for my use case.