1. 스크롤에 따른 navbar 의 색 변경하기

스크롤된 Y값 가져오기 -- window.scrollY

스크롤 이벤트는 document에 걸자! navbar 에 거는게 아니다...

클라이언트가 보는 요소의 크기 및 위치! -- getBoundingClientRect

요소의 겹침으로 원하지 않는 요소가 밖에 있을 때 -- z-index

상황

스크롤을 내리면 navbar 가 위로 올라가서 사라져 버린다.

1. 이 navbar를 항상 클라이언트가 볼 때 위에 고정되게 만들고

2. 스크롤이 어느정도 아래로 됐을 때 navbar 의 색을 진하게 바꿔서 다른 요소의 색이 뭍히지 않게 만들자

이 상황에서 알아봐야 할 건 아래와 같다.

학습 및 알아봐야 할 것

1. 페이지에서 Y축으로 스크롤 된 값을 알아오는 방법 (클라이언트의 현재 위치)

2. Navbar 의 정확한 height 를 알아오는 방법(클라이언트가 봤을 때)

3. navbar의 height 만큼 scroll 되었을 때 색을 동적으로 바꿔주는 방법

해결

navbar의 크기 가져오기

• getBoundingClientRect 를 이용하자.

• 여기서 말하는 크기는 클라이언트가 볼 때의 상대적인 크기를 의미한다.

• 물론 절대적인 값을 가져올 수도 있지만 상대적인 크기로 하는게 좋다.

페이지에서 스크롤 한 값을 가져오기

• window.scrollY 를 이용하면 바로 가져올 수 있다.

scroll 이벤트 등록하기

• 스크롤 이벤트는 navbar 에 등록할 수 없다!!!

• 여기서는 document 에 등록하면 된다.

어느정도 스크롤이 되었다면, 값을 비교해서 조건 만족하는 경우에 navbar 에 class 을 추가, 제거 함으로써 요소를 동적으로 변경하자.

const navbar = document.querySelector('#navbar');
const navbarHeight = navbar.getBoundingClientRect().height;
document.addEventListener('scroll', () => {
  if (window.scrollY > navbarHeight) {
    navbar.classList.add('navbar--dark');
  } else {
    navbar.classList.remove('navbar--dark');
  }
});