Implementing multiple levels of sticky headers.

[GuilleSM23]

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:

<Section1>
 <SubSection1>
  <Item1>
  <Item2>
  <Item3>
 <SubSection2>
  <Item1>
  <Item2>
  <Item3>
<Section2>
 <SubSection1>
  <Item1>
  <Item2>
  <Item3>
 <SubSection2>
  <Item1>
  <Item2>
  <Item3>

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.