Wrapper element gets wrong height if content changes when sticky

[pauln]

The height assigned to sticky-element-container when the element becomes sticky appears to be calculated before isSticky in the yielded hash becomes true, which can result in either a gap between the sticky element and subsequent content (if the element gets smaller when sticky) or the sticky element covering up some of the subsequent content (if the element gets larger when sticky).

In order to test this / see it in action, you can add the following extra columns to the demo app:

  <div class="col off">
    {{#sticky-element class="sticky" as |sticky|}}
      {{#if sticky.isSticky}}
        <div style="height: 50px;background-color:#f00;"></div>
      {{else}}
        <div style="height: 250px;background-color:#f00;"></div>
      {{/if}}
      <p>small, not sticky to bottom, off view, shrinks when sticky</p>
      <p class="debug">
        {{sticky-debug sticky}}
      </p>
    {{/sticky-element}}
    <p>This bit isn't sticky.</p>
  </div>

  <div class="col off">
    {{#sticky-element class="sticky" as |sticky|}}
      {{#if sticky.isSticky}}
        <div style="height: 250px;background-color:#f00;"></div>
      {{else}}
        <div style="height: 50px;background-color:#f00;"></div>
      {{/if}}
      <p>small, not sticky to bottom, off view, grows when sticky</p>
      <p class="debug">
        {{sticky-debug sticky}}
      </p>
    {{/sticky-element}}
    <p>This bit isn't sticky.</p>
  </div>

When you scroll far enough for the elements to stick to the top, the first column will have a gap between the sticky element and the "This bit isn't sticky" text, whereas the "isn't sticky" text in the second column will disappear behind the sticky element.

[simonihmig]

@pauln I tried your example, and I see what you are describing. However I am not sure if we should consider that "wrong". In general I think I would expect the behavior to be as it is. Imagine you have a navbar that you want to stick to the top when scrolling down, you wouldn't want the following content to reflow and "jump", rather it should be unaffected and continue to scroll down smoothly, right!?

What's your use case where you would expect a different behavior?

[pauln]

Perhaps it comes down to the difference in height between the sticky and non-sticky modes; if the difference is large, it feels a bit weird to have a large empty space appear when the element becomes sticky - and to then have to scroll back up to the top of the empty space in order for the element to "unstick" and return to the large mode (which contains a bunch of additional detail, in my case).

I wonder if some kind of parallax(ish) approach might be a good compromise: if the sticky version of the element is (moderately) smaller than the non-sticky version, adjust the height of the wrapper in increments based on the scroll position, thereby accelerating scrolling through the gap. That might be beyond the scope of ember-sticky-element, though - if so, any thoughts on how to implement it would definitely be appreciated :-)

[buschtoens]

These two images display such a use case. There's a fixed header that, when sticky, collapses the logos in order to make more room for the table.

Wit the current implementation, the moment the element gets stickied, a gap between the header and the table is introduced.

This is fundamentally a pretty tough problem to solve, since we cannot easily link the height of the placeholder element to the height of the stickied element.

Possible solutions:

• Use Resize Observer: poor support
• Use a Rezise Observer polyfill: not so great performance
• Manually poll height changes: also not great