You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi. I've been using React Virtual to implement long virtualized lists in my app and have been loving it so far. However, I've run into a bit of an issue when trying to implement multiple levels of sticky headers. My intention was to have a list with the following structure:
Having both "Section" and "SubSection" as sticky headers. Following the "Sticky" example, I have been able to implement them but there's a small issue with it and I was hoping someone could help me solve it. Basically, just like in the example, the headers don't obtain the "sticky" css property until they hit the top of the list. For the first level (Section) that's perfect, but for the second level (SubSection) things get a bit more messy.
Basically, second level headers will keep scrolling past the previous sticky SubSection until they hit the top of the list. Then, they obtain the "sticky" css property and correctly replace the previous subheader. This is technically "functional", but it looks pretty janky and ugly. Has anyone found a way to implement multiple levels of sticky headers without that kind of jank happening?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hi. I've been using React Virtual to implement long virtualized lists in my app and have been loving it so far. However, I've run into a bit of an issue when trying to implement multiple levels of sticky headers. My intention was to have a list with the following structure:
Having both "Section" and "SubSection" as sticky headers. Following the "Sticky" example, I have been able to implement them but there's a small issue with it and I was hoping someone could help me solve it. Basically, just like in the example, the headers don't obtain the "sticky" css property until they hit the top of the list. For the first level (Section) that's perfect, but for the second level (SubSection) things get a bit more messy.
Basically, second level headers will keep scrolling past the previous sticky SubSection until they hit the top of the list. Then, they obtain the "sticky" css property and correctly replace the previous subheader. This is technically "functional", but it looks pretty janky and ugly. Has anyone found a way to implement multiple levels of sticky headers without that kind of jank happening?
Thanks.
Beta Was this translation helpful? Give feedback.
All reactions