Offset start calculation regression in 6.3.4

[isTravis]

Thanks so much for the fantastic work! This package has been wonderful to use!

Requested Update

The offset calculation change introduced in 6.3.4 is causing different behavior that is a regression for my use case. I'm happy to update my code to match the new calculation behavior, but I haven't been able to figure out how.

Here is the difference in behavior between 6.3.3 and 6.3.4:

6.3.3

In 6.3.3 the subheader appears when the offset it reached.

6.3.4

In 6.3.4 the subheader appears when the parent container first scrolls past the top of the client window.

At the least - this feels like a major (breaking) version change, rather than a patch-fix version change. It took me a while to hunt down why my logic was no longer working - only to realize "stickybits": "^3.6.2", was the issue.

The code I'm using at the moment is:

useEffect(() => {
	const nextOffsetHeight = headerRef.current.offsetHeight;
	const stickyInstance = stickybits('.header-component', {
		stickyBitStickyOffset: 35 - nextOffsetHeight,
		useStickyClasses: true,
	});

	return () => {
		stickyInstance.cleanup();
	};
}, [windowWidth]);

Are There Examples Of This Requested Update Elsewhere?

This seems to be related to the discussion in #455 and PR #456. It may also be related to #478.

[isTravis]

Thanks so much for the quick fix!

[FrankMerema]

Now again its breaking in IE for my case again, with the update to 3.6.5. Isn't there a way we can get both worlds to work?

[FrankMerema]

It looks like if your element is a direct child of the element which is lets say the parent it was indeed broken. But in my case I have like (which breaks now again)

<section class="scrollable">
    <div class="container">
        <header class="stickybits attached here with parent scrollable">// stuff here</header>
    </div>
</section>

In the case it works correctly:

<section class="scrollable">
    <header class="stickybits attached here with parent scrollable">// stuff here</header>
</section>

Maybe check if the scrollable parent is direct parent or some higher in hierarchy.

[yowainwright]

@FrankMerema I very much appreciate your work and comments. I'm going to add you to the README, etc. 🙏.

I'd love your assistance in fixing this issue once and for all.

[FrankMerema]

Can we reopen this issue as it is still a "issue"

[yowainwright]

@FrankMerema yes. Could you provide me with your usage?

Thank you!

[FrankMerema]

@yowainwright the example above, is my use case I sometimes have elements within elements (angular components for example).

<section class="scrollable-section">
  <angular-component-header>
    <div class="stickybits attached here with parent scrollable-section">
      <!-- content -->
    </div>
  </angular-component-header>
</section>