Search
Get Started
KP-C
Kevin Powell - Community
•
2y ago
Tobias Sjögren
Hierarchical Sticky Headings
How can a sticky H2 be
"pushed up
" by a following sticky H1
?
Kevin Powell - Community
Join
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,373
Members
View on Discord
Was this page helpful?
Yes
No
S
SvenSplynter
•
3/22/24, 3:52 PM
Can you be a bit more specific
? Is this when scrolling
?
T
Tobias Sjögren
OP
•
3/22/24, 6:42 PM
Sorry
, yes
, when scrolling
C
Choo♚𝕂𝕚𝕟𝕘
•
3/23/24, 3:10 AM
I
'm not sure if this is what you want
.
https://codepen.io/chooking/pen/wvZdyvo
T
Tobias Sjögren
OP
•
3/23/24, 6:00 AM
Header level 2 should not push up its parent
(level 1
)
.
.
S
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
S
SvenSplynter
•
3/25/24, 10:38 AM
or perhaps a combination of this with what ChooKing was giving you
?
T
Tobias Sjögren
OP
•
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
)
.
T
Tobias Sjögren
OP
•
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
.
)
.
.
.
S
SvenSplynter
•
3/25/24, 10:51 AM
I
've modified the pen
. Please take a look
T
Tobias Sjögren
OP
•
3/25/24, 10:53 AM
That is what I meant
! Thx
!
S
SvenSplynter
•
3/25/24, 10:54 AM
The trick is to make the div
's that contain the different header levels nested
T
Tobias Sjögren
OP
•
3/25/24, 10:54 AM
Have you seen such a behaviour anywhere
?
S
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