211020 TIL 자바스크립트 스크롤의 방향에 따라 숨겨지고 보여지는 효과(학습 88일차)

순수 자바스크립트로 스크롤을 내리면 헤더가 숨겨지고 스크롤을 올리면 보이는 효과를 구현해 보았다.

기본로직 = window.pageYOffset;을 변수에 저장하고 비교할 변수를 만들어서 비교 값에따라 class가 추가되고 제거되도록 함.
header가 해당 class가 있는지 없는지 확인하기 위해 .contains()를 사용

if (currentScroll <= 0) {
    header.classList.remove('scroll-up');
  } 
if (currentScroll > lastScroll && !header.classList.contains('scroll-down')) { 
  header.classList.remove('scroll-up');
  header.classList.add('scroll-down');
}