수직 스크롤 발생 시 header 태그에 active 클래스 추가 및 삭제

수직 스크롤 발생 시 header 태그에 active 클래스 추가 및 삭제 코드

// 수직 스크롤 발생 시 header 태그에 active 클래스 추가 및 삭제
(function(){
    const headerE1 = document.querySelector("header")
    window.addEventListener("scroll", function(){
        this.requestAnimationFrame(scrollCheck);
    });
    
    function scrollCheck(){
        const browserScrollY = window.scrollY ? window.scrollY : window.pageYOffset;
        if(browserScrollY > 0){
            headerE1.classList.add('active');
        }else{
            headerE1.classList.remove('active');
        }
        console.log('scroll')
    }
})();

 

코드를 만든 이유 

 

홈페이지 상단 메뉴가 고정되게 만들고 싶었다. 스크롤을 내려도 메뉴가 고정되면 다시 스크롤을 올릴 필요가 없어서 이용자들이 편리하다고 느낀다. 

 

 

코드 설명

 

1. const headerE1 = document.querySelector("header")

: "header" 요소를 선택하여 headerE1 변수에 할당합니다. 이는 문서에서 첫 번째로 발견되는 "header" 요소를 선택합니다.

2. window.addEventListener("scroll", function(){...});

: window 객체에 스크롤 이벤트 리스너를 등록합니다. 스크롤이 발생할 때마다 해당 함수를 호출합니다.

3. this.requestAnimationFrame(scrollCheck);

: requestAnimationFrame() 메서드를 사용하여 scrollCheck 함수를 호출합니다. 이는 다음 프레임을 요청하고, 프레임이 렌더링 되기 전에 scrollCheck 함수를 실행합니다. 이렇게 함으로써 부드러운 애니메이션 효과를 얻을 수 있습니다.

4. function scrollCheck(){...}

: scrollCheck라는 이름의 함수를 선언합니다. 이 함수는 스크롤 이벤트가 발생할 때 실행됩니다.

5. const browserScrollY = window.scrollY ? window.scrollY : window.pageYOffset;

: window.scrollY 속성을 사용하여 수직 스크롤 위치를 가져옵니다. 만약 window.scrollY가 지원되지 않는 경우, window.pageYOffset 속성을 사용하여 스크롤 위치를 가져옵니다.

6. if(browserScrollY > 0){...}

: browserScrollY 값이 0보다 큰지 확인하여 스크롤 위치를 검사합니다. 스크롤 위치가 0보다 크면 아래의 코드를 실행합니다.

7. headerE1.classList.add('active');

: headerE1 요소의 classList 속성을 사용하여 'active' 클래스를 추가합니다. 이를 통해 스크롤 위치에 따라 헤더 요소에 'active' 클래스가 추가됩니다.

8. headerE1.classList.remove('active');

: headerE1 요소의 classList 속성을 사용하여 'active' 클래스를 제거합니다. 스크롤 위치가 0일 때, 헤더 요소에서 'active' 클래스가 제거됩니다.

9. console.log('scroll')

: 'scroll'이라는 메시지를 콘솔에 출력합니다. 스크롤 이벤트가 발생할 때마다 이 메시지가 출력됩니다.

 

결과

스크롤을 내려도 상단 메뉴가 고정된다.