固定元素“滚动”滚动

Question

我正在尝试在滚动上创建固定元素。我使用cdkScrollable发出滚动事件，并在固定组件中观察到它。仅当我使用changeDetector时设置固定或绝对类，而我的视图不会刷新。另一个问题是滚动上的固定元素“跳转”，过渡不流畅。任何想法如何解决？在此先感谢：）

ngOnInit() {
    this.dispatcherService.scrolled().pipe(
      map((scroll: CdkScrollable) => scroll.measureScrollOffset('top')),
      map((offset: number) => offset >= this.elementPosition),
      startWith(false),
      distinctUntilChanged()
    ).subscribe(fixed => {
      this.fixed = fixed;
      this.cdr.detectChanges()
    });
  }

 ngAfterViewInit() {
    this.elementPosition = this.fixedComponent.nativeElement.getBoundingClientRect().top;
  }

<div class="fixed-box" [ngClass]="{'fixed': fixed, 'absolute': !fixed}" #fixedComponent>
  <ng-content></ng-content>
</div> 

<mat-sidenav-content cdkScrollable>
    ...
    <ng-content></ng-content>
  </mat-sidenav-content>