LHJ

I'm a FE developer.

3번째 섹션 인터렉션 구현 - 스크롤에 반응하는 메뉴

01 Sep 2020 » js_apple_interaction

3번째 섹션 인터렉션 구현 - 스크롤에 반응하는 메뉴

현재 예제에선 상단 메뉴가 2구간으로 나뉘어져있다.
제일 위에 구간 height45px이다.

스크롤 위치가 45px보다 클 때, 메뉴에 position: fixed; 속성이 있는 class를 부여하면 된다.
반대일 땐 제거하면 된다.

if (pageYOffset > 45) {
    document.querySelector().classList.add('')
} else {
    document.querySelector().classList.remove('')
}