stack-sticky Demo

This page includes multiple scroll containers and one nested scroller. Scroll each area to verify sticky stacking order.

Tip: after dynamic DOM updates, run stackSticky() again to recompute offsets.

Scroll Area A: Basic stacking

A / Sticky Header 1

Basic linear content flow.

A-Content 1
A / Sticky Header 2

Continue scrolling and Header 2 stacks under Header 1.

A-Content 2
A / Sticky Header 3

Third-level stacking behavior.

A-Content 3
A / Sticky Header 4
A-Content 4

Scroll Area B: Nested scroller

B / Outer Header 1

Outer sticky appears first, then nested scrolling starts.

B-Outer Content

Inner top stacking

B / Inner Header 1
B-Inner Content 1
B / Inner Header 2
B-Inner Content 2
B / Inner Header 3
B-Inner Content 3

Inner bottom stacking

Scroll to the end and bottom sticky items will stack upward
B / Bottom Sticky 1
B-Bottom Content 1
B / Bottom Sticky 2
B-Bottom Content 2
B / Bottom Sticky 3
B-Bottom Content 3

Inner left stacking

B / Left 1
Left stack lane A Horizontal scrolling lets sticky items accumulate from the left edge.
B / Left 2
Left stack lane B Each sticky block reserves width so the next one snaps beside it.
B / Left 3
Left stack lane C Keep scrolling to see the full chain settle in order.

Inner right stacking

Right stack lane A These sticky items pin against the right edge while content keeps moving.
B / Right 1
Right stack lane B The library now uses width for horizontal offset accumulation.
B / Right 2
Right stack lane C The last sticky block should align inward from the right edge.
B / Right 3
B / Outer Header 2
B-Outer Content
B-Outer Tail

Scroll Area C: Longer chain

C / Sticky Header 1
C-Content 1
C / Sticky Header 2
C-Content 2
C / Sticky Header 3
C-Content 3
C / Sticky Header 4
C-Content 4
C / Sticky Header 5
C-Content 5