Affix

Make an element stick to viewport.

When To Use#

When user browses a long web page, some content need to stick to the viewport. This is common for menus and actions.

Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.

Import this Component Individually#

You can get more detail here.

import { NzAffixModule } from 'ng-zorro-antd/affix';

Examples


The simplest usage.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-affix-basic',
  template: `
    <nz-affix>
      <button nz-button [nzType]="'primary'">
        <span>Affix top</span>
      </button>
    </nz-affix>
    <br />
    <nz-affix nzOffsetBottom="0">
      <button nz-button [nzType]="'primary'">
        <span>Affix bottom</span>
      </button>
    </nz-affix>
  `
})
export class NzDemoAffixBasicComponent {}

Set a nzTarget for 'nz-affix', which is listen to scroll event of target element (default is window).

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-affix-target',
  template: `
    <div class="scrollable-container" #target>
      <div class="background">
        <nz-affix [nzTarget]="target" id="affix-container-target">
          <button nz-button [nzType]="'primary'">
            <span>Fixed at the top of container</span>
          </button>
        </nz-affix>
      </div>
    </div>
  `,
  styles: [
    `
      .scrollable-container {
        height: 100px;
        overflow-y: scroll;
      }

      .background {
        padding-top: 60px;
        height: 300px;
        background-image: url(//zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg);
      }
    `
  ]
})
export class NzDemoAffixTargetComponent {}

Callback with affixed state.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-affix-on-change',
  template: `
    <nz-affix [nzOffsetTop]="120" (nzChange)="onChange($event)">
      <button nz-button>
        <span>120px to affix top</span>
      </button>
    </nz-affix>
  `
})
export class NzDemoAffixOnChangeComponent {
  onChange(status: boolean): void {
    console.log(status);
  }
}

API#

nz-affix#

PropertyDescriptionTypeDefaultGlobal Config
[nzOffsetBottom]Pixels to offset from bottom when calculating position of scrollnumber-
[nzOffsetTop]Pixels to offset from top when calculating position of scrollnumber0
[nzTarget]specifies the scrollable area dom nodestring | HTMLElementwindow
(nzChange)Callback for when affix state is changedEventEmitter<boolean>-

Note: Children of nz-affix can not be position: absolute, but you can set nz-affix as position: absolute:

<nz-affix style="position: absolute; top: 10px, left: 10px">
  ...
</nz-affix>