CSS 코드를 추가하고 나면 자바스크립트로 웹 브라우저의 스크롤이 내려갔는지 확인하면 됩니다. script.js 파일에 다음과 같은 스크롤 이벤트를 등록합니다.
13/end/js/scroll.js - 스크롤 이벤트 추가
const headerEl = document.querySelector("header");
window.addEventListener('scroll', function(){
const browerScrollY = window.pageYOffset;
if(browerScrollY > 0){
headerEl.classList.add("active");
}else{
headerEl.classList.remove("active");
}
});
웹 브라우저의 수직 스크롤 위치는 window 객체의 pageYOffset 속성으로 참조할 수 있습니다. 속성값이 0보다 크면 스크롤됐다고 볼 수 있으므로 이를 조건으로 처리해서 if 문으로 active 클래스를 추가하거나 삭제하면 됩니다.
그림 13-24 스크롤 이벤트 적용 결과