13.10.2 스크롤 이동 시 헤더 영역에 스타일 적용하기

현재 헤더 영역의 텍스트가 흰색이라서 스크롤을 내리다가 글씨가 흰색인 영역이나 배경이 흰색인 영역에서는 헤더 영역의 메뉴가 잘 안 보입니다.

그림 13-23 헤더 영역이 안 보이는 문제 발생

그래서 헤더 영역에 새로운 클래스를 추가해서 웹 브라우저가 수직 방향으로 스크롤되면 스타일을 적용하는 방법으로 해결하려고 합니다.

먼저 다음처럼 헤더 영역에 새로운 CSS 코드를 추가합니다. header 태그에 active 클래스가 추가되면 헤더 영역의 배경이 검은색으로 지정되고, fadeIn 애니메이션을 적용해 투명도가 0에서 1로 1초간 변하게 됩니다.

header.active{
  background-color:rgba(0,0,0);
  animation:fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}