utils/stickyStackLayout

Overview

Pure geometry for an independently-revealing stack of sticky bars pinned to one edge of the scroll viewport (the top or bottom). Given each bar's measured height and current hidden state, in stack order from the pinned edge outward, it returns the per-bar layout the host applies as inline style: a static sticky offset (top or bottom), a transform that hides a bar and compacts the survivors, and a stacking order. Keeping the math pure makes it unit-testable without a browser; the host only measures heights and applies the result.

The model: each bar's sticky offset is the sum of the heights of all bars between it and the pinned edge (the classic stacked-sticky technique), and never changes as bars hide. Hiding is done with transforms instead, so only the GPU-friendly transform animates: a visible bar shifts toward the edge by the total height of the hidden bars nearer the edge (closing their gaps), and a hidden bar slides fully past the edge, behind the bars nearer the edge (which carry a higher stacking order). The total height of the still-visible bars is returned so the host can publish it (e.g. as the offset a sticky table header sits below).

Methods

• resolveStickyStack - Resolve the layout for a stack of sticky bars pinned to one edge.

Types

StickyStackBar

StickyStackBarLayout

StickyStackLayout

Source

client/lib/utils/stickyStackLayout.js:1