JS 스크롤 시 클래스 추가 및 제거하기

 

fixed된 헤더가 스크롤을 내렸을 때 클래스 추가 및 제거되는 코드를 구현해봄.

scrollHeader() {
  // 헤더와 섹션을 선택
  let header = document.querySelector('.header');
  let section = document.querySelector('.section');

  // 스크롤 이벤트 리스너 추가
  window.addEventListener('scroll', function() {
    // 섹션의 위치를 확인
    let sectionRect = section.getBoundingClientRect();

    // 섹션이 뷰포트에 보이면 헤더에 클래스 추가
    if (sectionRect.top <= 0 && sectionRect.bottom >= 0) {
      header.classList.add('is-color');
    } else {
      header.classList.remove('is-color');
    }
  });
},

 

 

 

See the Pen Untitled by Jihee (@ivy-love) on CodePen.