Javascript_08-3: 스크롤(scroll) 이벤트의 활용

window.scrollY를 활용하자

어느 일정 구간을 스크롤하면 '버튼'이 만들어지도록 한다
상수를 정하고 window.scrollY가 그 값을 넘으면 버튼이 생기는 방식이다

const STANDARD = 40;

if (window.scrollY > STANDARD) { // 스크롤이 40px을 넘었을 때
    toTop.classList.add('go_top'); //go_top이라는 버튼 생성

 

lastScrollY를 통해 스크롤의 방향을 추적한다

lastScrollY는 이전 내가 스크롤한 기록이다
그렇다면 현재 스크롤의 위치와 비교해서
이용자의 스크롤 방향을 알아낼 수 있다

스크롤을 내릴 때 위 메뉴바가 사라지고
스크롤을 올릴 때 위 메뉴바가 뜨도록 만든다

if (window.scrollY > lastScrollY) { // 스크롤 방향이 아래
    nav.classList.add('lift-up');
  }