diff --git a/components/affix/affix.component.ts b/components/affix/affix.component.ts index f7a52415d22..74c3f895444 100644 --- a/components/affix/affix.component.ts +++ b/components/affix/affix.component.ts @@ -85,6 +85,7 @@ export class NzAffixComponent implements AfterViewInit, OnChanges, OnDestroy, On private destroy$ = new Subject(); private timeout?: number; private document: Document; + private lastVisibleElementOffsetSize: SimpleRect | null = null; private get target(): Element | Window { const el = this.nzTarget; @@ -252,6 +253,11 @@ export class NzAffixComponent implements AfterViewInit, OnChanges, OnDestroy, On top: false, bottom: false }; + + if (elemOffset.height !== 0 && elemOffset.width !== 0) { + this.lastVisibleElementOffsetSize = elemOffset; + } + // Default to `offsetTop=0`. if (typeof offsetTop !== 'number' && typeof this.nzOffsetBottom !== 'number') { offsetMode.top = true; @@ -263,7 +269,7 @@ export class NzAffixComponent implements AfterViewInit, OnChanges, OnDestroy, On const targetRect = getTargetRect(targetNode as Window); const targetInnerHeight = (targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight; if (scrollTop >= elemOffset.top - (offsetTop as number) && offsetMode.top) { - const width = elemOffset.width; + const width = elemOffset.width || this.lastVisibleElementOffsetSize?.width; const top = targetRect.top + (offsetTop as number); this.setAffixStyle(e, { position: 'fixed', @@ -280,7 +286,7 @@ export class NzAffixComponent implements AfterViewInit, OnChanges, OnDestroy, On offsetMode.bottom ) { const targetBottomOffset = targetNode === window ? 0 : window.innerHeight - targetRect.bottom!; - const width = elemOffset.width; + const width = elemOffset.width || this.lastVisibleElementOffsetSize?.width; this.setAffixStyle(e, { position: 'fixed', bottom: targetBottomOffset + (this.nzOffsetBottom as number),