CngxStickyHeader

DirectivePrimaryv0.1.0WCAG AA

projects/common/layout/scroll/sticky-header.directive.ts

Import#

import { CngxStickyHeader } from '@cngx/common/layout'

Description#

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.

<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

Metadata#

Selector: [cngxStickyHeader]
Export as: cngxStickyHeader

Host#

Static attributes: styleposition: sticky; top: 0; z-index: var(--cngx-sticky-z-index, 1)
Bound classes: cngx-sticky--active ← isSticky

Index#

Inputs#

threshold#number

input()

Intersection threshold - 0 triggers as soon as the sentinel leaves.

default 0

Outputs#

stickyChange#boolean

output()

Emitted when the sticky state changes.

Instance Properties#

isSticky#unknown

Readonly

Whether the header is currently in its stuck position.

this.isStickyState.asReadonly()

HostBindings#

Binding	Expression
`[class.cngx-sticky--active]`	`isSticky()`

CngxStickyHeader

Import#

Description#

Sticky header with shadow#

Related#

Metadata#

Host#

Index#

Properties

Inputs

Outputs

HostBindings

Inputs#

Outputs#

Instance Properties#

HostBindings#

Sticky header with shadow