scrollbar sidemenu stop 사이드 메뉴 멈추게 하기 예시 / scroll side

<section (scroll)=onScroll();
  #section>
    <div #reportDiv >
          <app-report-menu
            [ngClass]="{'fixed' : reportMenuPosition < 5600, 'absolute bottom-[5rem]' : reportMenuPosition >= 5600}"
          >
          </app-report-menu>
    </div>
</section>

1. 부모요소의 크기에 맞게만 사이드를 내려오도록 설정하기

2. ngClass 를 활용하여 fixed, absolute 로 조절

 

  @ViewChild('headerDiv', { read: ElementRef }) headerDiv: ElementRef;

reportMenuPosition = 0;

onScroll() {
    this.scrollTop = this.section.nativeElement.scrollTop;
    this.reportMenuPosition =
      this.scrollTop + this.reportDiv.nativeElement.clientHeight;
  }

3. bottom 을 기준으로 멈춰야 하므로 스크롤 탑 + div 요소를 더해서 bottom 을 구하기

4. 전역 변수에 할당 후 해당 변수를 템플릿에 활용하여 적용