[Javascript] 화면 스크롤 감지해서 event 발생(header bar 투명도 조절하기)

Netflix 만들기 Project 중 모르는 부분 정리 일부분

 

header bar 예시 :

 

 

해당 문서에서 스크롤 했는지 안했는지 감지하는 방법

 

document.addEventListener("scroll", scrollEvent);

 

스크롤를 했을 때 만약 제일 위쪽 화면을 보고 있지 않는다면 header bar 배경을 까맣게 제일 위쪽 화면을 보고 있다면 투명하게 만들기

 

if(document.documentElement.scrollTop > 0){
        top_bar.classList.add("top-bar-down");
 }else{
        top_bar.classList.remove("top-bar-down");
 }

 

이때 document.documentElement.scrollTop 은 상단에서 얼마큼 스크롤이 내려가있는지 값을 반환함.

고로 0일 경우 스크롤이 제일 위쪽 아닐 경우 밑쪽인 것을 알 수 있음.

 

해당 결과 :

 

 

전체 코드 :

 

const top_bar = document.querySelector(".top-bar");

function scrollEvent(){
    document.addEventListener("scroll", function(){
        if(document.documentElement.scrollTop > 0){
            top_bar.classList.add("top-bar-down");
        }else{
            top_bar.classList.remove("top-bar-down");
        }
    });
}

function init(){
    document.addEventListener("scroll", scrollEvent);
}

init();