Sticky Hero + IntersectionObserver로 랜딩 GNB 활성화 구현하기
스크롤 위치에 따라 네비게이션 아이템이 활성화되는 랜딩 페이지 GNB를 만들었다.단순해 보이지만 디자인 요구사항에 있던 sticky 레이아웃과 IntersectionObserver 특성 때문에 예상보다 까다로웠던 과정을 정리한다! 1단계: 먼저 뼈대만 완성시킨 랜딩페이지의 레이아웃 구조 {/* fixed, z-50 */} Hero {" "} {/* Hero 위로 올라오는 콘텐츠 */} Meetings How it works ... Hero가 `sticky top-0`으로 뒤에 깔리고, 나머지 콘텐츠가 `relative z-10`으로 위에서 덮어씌우는 구조다.스크롤하면 Hero 위로 Meetings가 시트처럼 올라오는 느낌을 준다. 나중에 애니메이션을 적용하..
- Project & Challenge/[Project] 각할모 - 각자 할 거 하는 모임
- · 2026. 4. 2.