Header with two sticky components

Hello there and thank you for the great lib. I have a problem though trying to implement a header that is divided in three rows, two of which I want to be sticky. More specifically I want the first and the third one.

Here is a mockup of what I want: The first image is the basic layout (in the dotted rectangle is the header) while the second one is the scrolled layout with the sticky parts staying where they should be.

The layout in my code is the following:

<StickyContainer className={classes['page-container']}>
  <TopNavigation />
  <div className={classes['mainContainer']}>
    <div className='container'>
      {children}
    </div>
  </div>
</StickyContainer>

The TopNavigation component is structured as follows:

<div>
  <Sticky>
    {/* Here comes the first sticky content */}
  </Sticky>
  <div>
    {/* This should not be sticky */}
  </div>
  <div>
    {/* Here comes the second sticky content */}
  </div>
</div>

I tried making the third div Sticky as well, but it doesn’ t work properly as the two divs are being “merged” when they become sticky. I also tried wrapping it in a StickyContainer but again without any luck since it was becoming sticky only inside the content of the header div. I also tried to move the third div in the base layout file and wrapping it in a StickyContainer but that didn’t work as well.

What am I missing here? Is what I am asking something that cannot be solved using react-sticky? Any help would be much appreciated.

[vcarl]

Hm let me play around with this, I just took over maintenance of the library. This does seem like a good use case, but I don’t have a sense for how hard it would be to support. Not sure if it would be a bug or enhancement, either.

[codeanpeace]

It’d be cool if you could pass a stack flag to the component to get that behavior. ie <Sticky stack=true> or <StickyContainer stack=true>

edit: came across this “sticky stack” component just now https://github.com/YPlan/react-sticky-stack