여기서 끝내도 되고, 다음과 같이 코드를 한 번 더 정리할 수도 있습니다. 스크롤하면 이벤트가 계속 발생하므로 requestAnimationFrame() 메서드로 스크롤 이벤트를 최적화합니다.
TIP | 최종으로 scroll.js 대신에 scroll_request.js 코드만 적용하면 됩니다.
13/end/js/scroll_request.js
/* 수직 스크롤이 발생하면 header 태그에 active 클래스 추가 및 삭제 */
const headerEl = document.querySelector("header");
window.addEventListener('scroll', function(){
requestAnimationFrame(scrollCheck);
});
function scrollCheck(){
let browerScrollY = window.scrollY ? window.scrollY : window.pageYOffset;
if(browerScrollY > 0){
headerEl.classList.add("active");
}else{
headerEl.classList.remove("active");
}
}