Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Header with two sticky components

See original GitHub issue

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. layout sticky

The layout in my code is the following:

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

The TopNavigation component is structured as follows:

    {/* Here comes the first sticky content */}
    {/* This should not be sticky */}
    {/* Here comes the second sticky content */}

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.

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:8
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

vcarlcommented, Feb 23, 2018

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.

codeanpeacecommented, Apr 23, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

pure CSS multiple stacked position sticky? - Stack Overflow
All you need to do is keep nesting elements with position:sticky into one another. And then set ...
Read more >
CSS Position Sticky - How It Really Works! - Elad Shechter
CSS position sticky has two main parts, sticky item & sticky container. Sticky Item — is the element that we defined with the...
Read more >
Make two or more elements sticky in Webflow — Tutorial (2021)
Learn how to make two or more elements sticky using Webflow.Join the Pixel Geek Community:https://pixelgeek.communityWant to support my ...
Read more >
Multiple Sticky Titles with CSS and JS - CodePen
On some mobile platforms there are lists that group items under multiple headings. As you scroll through the list, the current title or...
Read more >
Css Sticky multiple sticky elements - JSFiddle
<header>Header</header>. 2. <div class="content">. 3. <div class="row">. 4. <div class="col-span-2">Left Div</div>. 5. <div class="col-span-8">.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found