[컴][js] 일정 scroll 이상일때 menu 를 고정시키는 방법

top sticky / 배너 고정 / 탑메뉴 고정 / 스크롤할때 상단 메뉴 고정 / 앵커 / 메뉴가 걸리도록

일정 scroll 이상일때 menu 를 고정시키는 방법

상단 menu 위로 banner 등을 넣어놓고, 아래로 scroll 을 하면 배너는 사라지고, 메뉴가 고정되는 메뉴를 만드는 법.

여기서 동작을 확인할 수 있다.

• https://codepen.io/senff/pen/ayGvD : 이 방법은 2개를 만들고, scroll 위치에 따라 하나는 보여주고, 하나는 감추고 하는 방법이다. 이방법은 '사파리 safari' 나 삼성인터넷 에서 계속 깜빡거리는 문제가 있다.
• How to keep a part of a page fixed on top when scroling: 이방법이 간단하고 가장 알맞다. 여기서는 다만 jquery 로 되어 있어서 이것을 typescript 로 수정했다.

class StickyTopWithBanner{
    header:any;
    topBannerHeight: number;
    constructor(){
        this.header = document.querySelector('.js-top-header');
    }
  
    run(){
        let header = this.header;

        const el: HTMLElement = document.querySelector('.js-loanCompanySignBox');
        const rect = el.getBoundingClientRect();
        el.style.display = 'block';
        
        this.topBannerHeight = rect.height;
        
        window.addEventListener('scroll', this.onScroll.bind(this));

        return;
    }
  
    onScroll (e: any) {

        if (window.pageYOffset > this.topBannerHeight) {
            this.header.classList.add('fix-top');
        }else{
            this.header.classList.remove('fix-top');
        }
    }
    
}