웹사이트들을 이용하다보면 아래와 같이 해당 사이트의 메인 이미지와 제일 상단에 제목이 표현 되는 사이트들이 많다. 하지만 아래보시다 시피 따로 처리를 해주지 않는 이상 header가 내용을 보는 동안에 불편을 끼칠 수있다. 옛날에는 스크롤의 탑기준이 어디에 왔는지에 따라서 헤더를 없애거나 백그라운드를 표현을 하면서 아래처럼 표현해왔다. 옛날에는 그랬지만 IntersectionObserver가 추가 됨에 따라서 좀더 편리하게 위의 기능을 처리 할 수 있다. const observer = new IntersectionObserver ((entries) => { console . log ( 'entries' , entries) } , { root : document . querySelector ( '.contents' ) , threshold : [ 0.1 , 0 ] }) const target = document . querySelector ( '.banner' ) observer . observe ( target ) ; 사용 방법은 위와 같다. IntersectionObserver( handler, options ) handler : 위의 설정기준으로 target엘리먼트가 루트엘리먼트에서 보이지 않을때와 10프로 미만 혹은 10프로 초과 혹은 보이지 않을때 호출이 된다. 호출시 첫번째 인자로 IntersectionObserverEntry[]를 전달해준다. options : root 감시대상들의 상위요소이다. threashold 임계값 목록이다. 아래는 IntersectionObserver를 이용하여 header에 백그라운드를 추가하는 샘플 코드입니다. 아래와 같은거 말고도 제일 스크롤이 제일 하단에 충돌 ...