목록Intersection Observer API (1)

Life is connecting the dots .

Intersection Observer API 사용해보기 - 스크롤링 시 메뉴 활성화

웹사이트 랜딩페이지를 보다 보면, 상단 헤더 메뉴가 사용자가 스크롤 시 진입한 구간에 따라 메뉴의 스타일도 이동되는 것을 볼 수 있다. 그동안 프로젝트에서는 이러한 스타일을 적용할 페이지가 없었기에 한 번도 만들어보지 못했었다. 하지만 최근에 포트폴리오를 만들면서 관련 API를 알게 되어 기능도 익힐 겸 간단하게 적용해 보려고 한다. Observer API의 필요성 MDN공식문서에서 확인하면 타겟 요소가 상위요소 혹은 최상위 요소(=뷰포트)와 교차하는 변경사항을 비동기적으로 관찰하는 방법을 제공한다고 한다. 말 그대로 관찰자 API이다. 🧐 대상을 감시하다가 대상이 정해 놓은 구역에 진입하면 그때부터 만들어 놓은 함수를 시작한다. 과거부터 어떤 특정 요소의 가시성을 확인하고 두 요소들의 가시성, 즉, 서..
Programming/JS 2023. 7. 12. 12:13
이전 Prev 1 Next 다음