Header with two sticky components

[gkaran]

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.

[oyeanuj]

@dbarbalato Also curious about this!

[merapi]

@gkaran is it solved? I did it manually with topOffset and stickyStyle props

[gkaran]

The point is not to do it manually. The problem is when you have elements that you don't know their size and they should stack. So when you don't know the size that an element will have, you cannot do it with topOffset

[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

[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.

[ptamoncloudity]

Hi,

Any progress on this issue/idea?

[vcarl]

I've been busy with other things unfortunately @ptamoncloudity (when I commented this repo had over 50 issues, we're improving!).

One small thing that would be very helpful to me would be to make a Code Sandbox or something to reproduce the bad behavior! If I can play with it in a bad state, I can more easily test changes.