CngxStickyHeader

Communicates when a sticky-positioned element becomes stuck.

Applies position: sticky; top: 0 on the host automatically. The directive adds a sentinel element before the host and uses IntersectionObserver to detect when the sentinel scrolls out, meaning the header is now stuck. Toggles a CSS class for shadow, elevation, or background changes.

The sentinel is observed against the nearest scroll-container ancestor (the first ancestor whose computed overflow-y is not visible), not the page - that is the scrollport position: sticky resolves against, so isSticky() reports the state the host actually has. A scrollport whose height is content-driven never scrolls in the block axis, so a header inside it never pins; in dev mode the directive warns once when it resolves against such a scrollport. The observer is recreated when threshold changes, matching the sibling observer directives.

Sticky header with shadow#

<header cngxStickyHeader #sh="cngxStickyHeader"
        style="position: sticky; top: 0;">
  Page header
</header>

.cngx-sticky--active { box-shadow: 0 2px 4px rgba(0,0,0,.1); }

https://cngxjs.github.io/cngx/examples/#/common/layout/sticky-header/sticky-header-with-shadow