Option only to trigger by pixel about scrollpos-styler

[acch]

Hi, thanks for your question. Not sure if I fully understand it - please correct me if I'm wrong...
I understand that you're essentially asking for two things:

1. Specify a reference element (by ID) to trigger the styling.
   The offset currently has to be specified as a pixel value. A reference element's position (top or bottom offset on page) can be translated into such pixel value using jQuery like you outline above. A similar example using pure JavaScript is described here.

2. Dynamically change the offset when the size or position of the reference element changes.
   This is difficult to implement inside ScrollPos-Styler, as I don't know which events will change the reference element. Querying the top / bottom offset of the reference element with each scroll event would be a significant waste of resources as most of the time the offset will remain unchanged. Thus, you would need to write your own event handler and inside that handler you should be able to update the offset which ScrollPos-Styler uses. This can either be achieved by calling the init() function and providing a new options object, or alternatively by updating the data-sps-offset attribute of the element to style. Both should work, please let me know if there's problems with dynamically changing the offset like so.

So what's left is the first part: ability to specify a reference element instead of a pixel value. However, I'm a bit reluctant to implement this as it would make the interface of this script more complex (read: ugly). One would either need to specify a pixel value, or a reference element... What happens if users specify both? Selecting elements by ID only works if you have a single reference element - what if you need multiple offsets for different elements to style? How to decide whether to use the top or bottom offset of the element?

Given the fact that translating an element's position into an offset pixel value is trivial in your own code (see examples above) I'd say that this would be the way to go...

Opinions please?

P.S.: Are you sure that your use case is not addressed by position:sticky? Does this come close to what you're looking for?

[acch]

I'm closing this one as I have not received any feedback.