Kevin Powell - Community•2y ago

Hierarchical Sticky Headings

How can a sticky H2 be "pushed up" by a following sticky H1?

SvenSplynter•3/22/24, 3:52 PM

Can you be a bit more specific? Is this when scrolling?

Tobias SjögrenOP•3/22/24, 6:42 PM

Sorry, yes, when scrolling

Choo♚𝕂𝕚𝕟𝕘•3/23/24, 3:10 AM

I'm not sure if this is what you want. https://codepen.io/chooking/pen/wvZdyvo

Tobias SjögrenOP•3/23/24, 6:00 AM

Header level 2 should not push up its parent (level 1)..

SvenSplynter•3/25/24, 10:38 AM

@Tobias Sjögren I think this is what you're looking for then.
https://codepen.io/Sven-Joseph/pen/JjVJbqj

SvenSplynter•3/25/24, 10:38 AM

or perhaps a combination of this with what ChooKing was giving you?

Tobias SjögrenOP•3/25/24, 10:44 AM

Can you add a H1 below that pushes up both of your H1 and H3 ?
Any following equal- or lower-numbered H should push up any previous sticky H (placed above).

Tobias SjögrenOP•3/25/24, 10:45 AM

In ChooKing's example, every H is pushed up by another H regardless of level numbering (H1, H2 etc.)...

SvenSplynter•3/25/24, 10:51 AM

I've modified the pen. Please take a look

Tobias SjögrenOP•3/25/24, 10:53 AM

That is what I meant! Thx!

SvenSplynter•3/25/24, 10:54 AM

The trick is to make the div's that contain the different header levels nested

Tobias SjögrenOP•3/25/24, 10:54 AM

Have you seen such a behaviour anywhere ?

SvenSplynter•3/25/24, 10:56 AM

It actually looks pretty familiar, but I can't really say where I've seen it before. I guess it reminds me the most of the sticky header in VS Code