@kit-ng-ui/affix

Pin content to the viewport edge when the page scrolls past a threshold. Mirrors ant-design's <Affix>.

Install

pnpm add @kit-ng-ui/affix

@use '@kit-ng-ui/affix/styles';

Example

<kit-affix [offsetTop]="64">
  <kit-button type="primary">Pinned button</kit-button>
</kit-affix>

API

| Input | Type | Default | Description | | -------------- | --------------------- | ----------- | --------------------------------------------------- | | offsetTop | number \| undefined | undefined | Pin to the top once scrolled past this offset (px). | | offsetBottom | number \| undefined | undefined | Pin to the bottom once scrolled past this offset. |

| Output | Payload | Description | | -------- | --------- | ----------------------------------------------------- | | change | boolean | Fired when the affixed state flips (true = pinned). |

Notes

• Set exactly one of offsetTop / offsetBottom. If both are set, top wins.
• While pinned, a same-size placeholder reserves the original layout space.