EnStickyContainer

EnStickyContainer and EnStickyItem work together to pin headers to the top of a scroll area. Wrap your content in an EnStickyContainer, then wrap the parts that should stick in EnStickyItem. Sticky items are constrained to their container, so they never escape it, and sibling items rest at the same offset — each one pushes the previous out of view as you scroll (replace/overlap behavior). No top values are needed on your side; the components compute them.

Set stack on the outermost container to make items in a nested EnStickyContainer rest below the ancestor header above them instead of overlapping it — so nesting adds depth while siblings still replace each other.

Preview

Props

Name	Description	Default	Control
qaId	Id that can be set for automation selectors. string	""
stack	Offset items of nested containers below their ancestor header (set on the outer container). When off, every item rests at top: 0 and overlaps. Inherited by nested containers. boolean	false	truefalse
gap	Pixel gap left between an ancestor header and the nested items resting below it. number	0

Slots

default

No description

Variables

Name	Type	Description
baseOffset	unknown	—
heights	unknown	—
headerHeight	unknown	—

Events

No events defined.

Methods

No methods defined.

Stacking nested headers

With stack on the outer container, a nested section's header comes to rest just below the outer header rather than covering it. Use gap to add breathing room between them.

EnStickyItem

Place one or more EnStickyItems inside an EnStickyContainer to mark the content that should stick. Outside stack mode, use the offset prop to rest an item lower (e.g. below a fixed page header).

Preview

Props

Name	Description	Default	Control
qaId	Id that can be set for automation selectors. string	""
offset	Distance from the top of the scroll area at which the item sticks. Accepts a number (px) or any CSS length string. In stack mode a numeric value is added to the computed stack offset (e.g. to clear a fixed header above the whole container). string | number	0
zIndex	Stacking order of the sticky item relative to surrounding content. string | number	10

Slots

default

The content that sticks.

Events

No events defined.

Methods

No methods defined.