Giters

w11k / angular-sticky-things

Sticky Directive for Angular 2+

Home Page:https://w11k.github.io/angular-sticky-things

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support for dynamic sticky element's height

aleesaan opened this issue · comments

commented

Hi again,

I was wondering what you think about adding support for a changing height in the sticky element - aka firing again the calculations whenever the sticky element's height change.
I have this problem with internationalization (i18n) in my app: if you have a sticky element with some text inside, and then change language, the new texts could cause the element's height to be different, which will cause the element to stick at the wrong time (at least until the window is resized, which will fire resize$.next() and re-trigger calculations).

One way could be to cache the last height, and on scroll check whether the current height changed, and if so trigger the calculations again, otherwise just return. Yet, I don't like to do this check on every scroll, as it doesn't have to do anything with scrolling, but I can't figure out another way (also considering the MutationObserver isn't well supported yet...). I also tried with AfterViewChecked but that also gets triggered every scroll, since on scroll we check whether it has to be sticky or not.

What are your thoughts on this?

commented

This will be a pretty common issue for dynamic contents of the sticky element. Thanks for bringing this up!

I see two possible solutions when I think about this:

  • Provide an input which either takes in a primitive value as a trigger or a stream. Anytime the input / stream triggers -> repaint. The responsibility of implementing the watch mechanism is with the developer.
  • Implement the MutationObserver internally. Browser support seems to match my requirment IE11 https://caniuse.com/#feat=mutationobserver.

Currently I'd prefer approach one, since it is more extensible even tough it moves more responsibility to the developer. This could be mitigated by providing another directive for the DomObservation. Let me think about this again, but feel free to add something to my thoughts or point out any failures in it.

In genereall this would probably be simplified by the already mentioned further move to Rx. I'll try start working on that.

commented

I agree with the first one too, as I'd rather not using the MutationObserver, but I thought to just expose a recalculate() method from the directive, that you could call whenever needed. I'll try opening a PR so you can see what it looks like, and if you still prefer the input stream I can change it later!

Edit: I just realized I badly explained the use case I had in mind.
The problem I have is when the content above the sticky element changes, in which case the offsets need to be recalculated. I will open a PR so you can see what I mean.
If the sticky element's height changes, this is currently already taken into account in the determineStatus function, which gets called on scroll. I think we could actually cache this stickyElementHeight to simplify the logic called on scroll, since we'll allow the user to manually recalculate() when needed. I'm not sure about this but I'll include it in the PR so you can let me know what you think!

commented

Support for recalculate() has landed in 1.1.0 based on your efforts. Thanks a lot for your work!