State change callback

[patric-eberle]

Is your feature request related to a problem? Please describe.
We use your plugin in Vue and need to update the content of the sticky element, when it becomes sticky. As far as I understand the documentation, there is currently no callback method to execute functionality, when the element becomes or stops to be sticky.

Describe the solution you'd like
There should be an option, to define a callback or bind to a custom event, to execute additional code, when the state of the sticky element changes (sticky/non-sticky).

Describe alternatives you've considered
Did not find a good one.

Additional context
In our case, we have a sidebar, that becomes sticky, once the header would cover it. In this case, some of the elements need to collapse by default in the sidebar, so it's size is reduced.

[github-actions]

Hey, thanks for filing an issue with Stickybits' first issue

[yowainwright]

@patric-eberle, thanks for your thoughtful issue.

I thought about an event system before but I realized that would/could become a mess with multiple Stickybit items. Especially for maintenance, haha.

I think a callback that happened on a Stickybit state update could be clean enough. The inheriting code could run its own checks within the callback and make updates as necessary.

Thoughts?

[patric-eberle]

Yes I also think that a callback would be the better solution. In my opinion a relation to the instance may not be required but it should at least give the new state or have two events for becoming and leaving sticky mode. I don't think there is value in this. But with the callback we certainly could wire up the state change with the surrounding environment.

e.g.

stickybits("selector", {
  onChange(state) {}
});

[simplenotezy]

Ough, I need a callback handler before I can use this library, thought it was included out of the box tbh.

[yowainwright]

I'm going to get to this repo asap. 🙏

I'm sure y'all understand trying to get extra work done during this time of adversity.

[simplenotezy]

My workaround is to use IntersectionObserveer and watch for the sticky classes

_{Sent with GitHawk}