import { Component } from '@angular/core';
import { WrAffix } from 'ngwr/affix';
@Component({ imports: [WrAffix] })
export class MyComponent {}wrAffix
Stick an element to the top on scroll and style it while it is stuck.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Usage
Style the stuck state with .wr-affix--active.
<header wrAffix [wrAffixOffsetTop]="0" (wrAffixChange)="onAffix($event)">
…
</header>header.wr-affix.wr-affix--active {
box-shadow: var(--wr-shadow-sm);
background: var(--wr-color-surface);
}Demo (scroll inside the box)
In a grid or flex parent
The sentinel leaves the flow there, so it adds no gap and takes no grid cell. The parent gets the wr-affix__container class, which makes it position: relative while an affix is in it, so its absolutely positioned children anchor to it. A position you give the parent yourself wins. Give the host align-self: start: a stretched item fills its row and has no room to stick.
<div style="display: grid; grid-template-columns: 12rem 1fr; gap: 1rem">
<aside wrAffix [wrAffixOffsetTop]="16" style="align-self: start">…</aside>
<main>…</main>
</div>API
| Name | Description | Type | Default |
|---|---|---|---|
[wrAffix] | Makes the host sticky and adds wr-affix--active while it is pinned. | directive | — |
[wrAffixOffsetTop] | Pixels from the top of the scroll container when stuck. | number | 0 |
(wrAffixChange) | Emits true on stick and false on release. | boolean | — |
.wr-affix | Always on the host. Sets z-index: 10; override it here to restack. | class | — |
.wr-affix--active | On the host while pinned. | class | — |