Group headers disappear behind sticky elements above Virtuoso container

[DeeBndx]

Description When using Grouped Mode and useWindowScroll, having another sticky element above will cause the Group headers to disappear behind the external sticky element. I've tried using custom Components and setting offsets, paddings and margins on TopItemList, though this positions the Group headers correctly, the Headers only change once they've reached the top of the outer viewport.

Reproduction I've made a crude example here: https://codesandbox.io/s/awesome-morse-td78k?file=/src/App.tsx

Expected behavior The Group headers would settle/stick below the other Sticky Element such that they are still visible when scrolling. Perhaps being able to set an offset to the Virtuoso container, to compensate for the size of the above element.

Desktop:

• OS: Windows.
• Browser: Chrome

[petyosi]

That's a good catch and a valid use case. I'm not sure how the displacement of the document header can be properly caught and taken into account.

[DeeBndx]

I've been trying to look into the Source Code in attempt to find a solution myself, but most of the code is very foreign to me. Would you be able to give a hint as to where it'd make sense to look, or are you willing and able to look into a solution. Any and all help is greatly appreciated.

[petyosi]

I can't give any timeline on when (or if at all) I can look into that. If you're using the library for commercial purposes, feel free to consider sponsoring the effort.

[DeeBndx]

My employer and I would be happy to sponsor. We haven't sponsored Open Source efforts before, and thus are a little unsure of where and how it all works. Would a sponsorship help in pushing for a solution to this specific issue?

[petyosi]

You can do a one-time sponsorship from here: https://github.com/sponsors/petyosi

[oleksiial]

As far as I found out, it is this top offset that is set to 0. Changing this value seems to solve this issue, but I am not sure how to properly add a prop to this. @petyosi could you help how to go on from here?

https://github.com/petyosi/react-virtuoso/blob/cb156cc3009cc544ca31eb30041ef35c4a278f8d/src/Virtuoso.tsx#L207C10-L207C10

[KKzLEO]

As far as I found out, it is this top offset that is set to 0. Changing this value seems to solve this issue, but I am not sure how to properly add a prop to this. @petyosi could you help how to go on from here?

https://github.com/petyosi/react-virtuoso/blob/cb156cc3009cc544ca31eb30041ef35c4a278f8d/src/Virtuoso.tsx#L207C10-L207C10

you can customize TopItemList component to add your own top attr

[jasan-s]

@KKzLEO how to do that exactly?

[fonty422]

I would also like to see an example @KKzLEO if you can provide please one?