wrAffix

import { WrAffix } from 'ngwr/affix';

<header wrAffix [wrAffixOffsetTop]="0" (wrAffixChange)="onAffix($event)">
  …
</header>

/* Style the stuck state via the .wr-affix--active modifier */
header.wr-affix--active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background: var(--wr-color-white);
}

Sticky header — affixed: false

Scroll content row #1

Scroll content row #2

Scroll content row #3

Scroll content row #4

Scroll content row #5

Scroll content row #6

Scroll content row #7

Scroll content row #8

Scroll content row #9

Scroll content row #10

Scroll content row #11

Scroll content row #12

Scroll content row #13

Scroll content row #14

Scroll content row #15

Scroll content row #16

Scroll content row #17

Scroll content row #18

Scroll content row #19

Scroll content row #20

Scroll content row #21

Scroll content row #22

Scroll content row #23

Scroll content row #24

Scroll content row #25

Scroll content row #26

Scroll content row #27

Scroll content row #28

Scroll content row #29

Scroll content row #30

Scroll content row #31

Scroll content row #32

Scroll content row #33

Scroll content row #34

Scroll content row #35

Scroll content row #36

Scroll content row #37

Scroll content row #38

Scroll content row #39

Scroll content row #40

Name	Description	Type	Default
`[wrAffix]`	Apply to any element. Adds `position: sticky` + an IntersectionObserver sentinel that toggles `wr-affix--active` while the element is pinned.	`directive`	`—`
`[wrAffixOffsetTop]`	Pixels from the top of the scroll container when stuck. Drives both `style.top` and the observer threshold — and it is live: an `IntersectionObserver` cannot change its `rootMargin`, so a new offset builds a new observer rather than letting the pinned position and the state flip apart.	`number`	`0`
`(wrAffixChange)`	Emits `true` on stick, `false` on release — transitions only. The observer reports STATE, so it delivers an entry the moment it starts watching and can repeat one the host is already in; a repeat is swallowed rather than emitted.	`boolean`	`—`
`.wr-affix--active`	Class added to the host while pinned. Hook your active-state styles here.	`class`	`—`

Import

Usage

Demo (scroll inside the box)

API