[JS] 스크롤 감지에 따른 헤더/네비게이션 효과 두가지

🎀 특정 값 넘어서면 헤더를 숨겨보자

스크롤 위치가 특정 값을 넘어서면
헤더를 숨겨보겠다.

window.scrollY 값이 30을 넘어서면 header를 숨기고,
그 이전 값일 경우에는 header가 다시 보일 수 있도록 설정하였다.

🎀 스크롤 방향에 따라서 제어해보자

스크롤 방향 아래인지(스크롤을 내리고 있는지) 아닌지에 따라 헤더를 제어해 보았다.

lastScrollY라는 번수에 스크롤 될 때 마다 이전 위치 값을 저장해주었다.
window.scrollY 현재 위치 값이 lastScrollY보다 크다면, 스크롤을 아래로 내리고 있다는 뜻이 된다.
이에 맞춰서 효과를 넣어주었다.