在angular中固定页面滚动上的div

.fixed-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

import { Directive, HostListener, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[fixedScrollDiv]'
})
export class FixedScrollDivDirective {
  constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

  @HostListener('window:scroll')
  onWindowScroll() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    const div = this.elementRef.nativeElement;

    if (scrollTop > 100) {
      this.renderer.setStyle(div, 'display', 'block');
    } else {
      this.renderer.setStyle(div, 'display', 'none');
    }
  }
}

<div fixedScrollDiv class="fixed-div">固定滚动的div</div>