Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Group headers disappear behind sticky elements above Virtuoso container #561

Open
DeeBndx opened this issue Feb 8, 2022 · 9 comments
Open
Labels
enhancement New feature or request sponsor-or-pr Contribute or sponsor the solution using GH sponsors

Comments

@DeeBndx
Copy link

DeeBndx commented Feb 8, 2022

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
@DeeBndx DeeBndx added the bug Something isn't working label Feb 8, 2022
@petyosi
Copy link
Owner

petyosi commented Feb 9, 2022

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
Copy link
Author

DeeBndx commented Feb 14, 2022

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
Copy link
Owner

petyosi commented Feb 14, 2022

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
Copy link
Author

DeeBndx commented Feb 14, 2022

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
Copy link
Owner

petyosi commented Feb 14, 2022

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

@petyosi petyosi added enhancement New feature or request and removed bug Something isn't working labels Mar 27, 2022
@petyosi petyosi changed the title Group headers disappear behind sticky elements above Virtuoso container [BUG] Group headers disappear behind sticky elements above Virtuoso container Mar 27, 2022
@petyosi petyosi added the sponsor-or-pr Contribute or sponsor the solution using GH sponsors label Mar 27, 2022
@oleksiial
Copy link

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
Copy link

KKzLEO commented Aug 8, 2023

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
Copy link

jasan-s commented Mar 24, 2024

@KKzLEO how to do that exactly?

@fonty422
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request sponsor-or-pr Contribute or sponsor the solution using GH sponsors
Projects
None yet
Development

No branches or pull requests

6 participants