[JS, CSS]투명 헤더 스크롤 내릴 때 바뀌도록 만들기

웹 페이지의 맨 위에 있는 투명한 배경 헤더가,

스크롤을 내리는 행위에 맞춰 함께 따라 내려오며, 글씨가 더 잘 보이도록 배경이 생기는 레이아웃이 존재한다.

투명 헤더. 클론코딩을 하던 중에 직접 만들어본 예시.

헤더가 계속 위에만 있는 구조라면 상관 없겠지만...

스크롤을 내릴 때 헤더가 따라 내려오며 바뀌는 효과는, 대체 어떻게 만드는 걸까?

 

아래로 스크롤을 내리자 이렇게 헤더가 바뀌었다.

---

이런 헤더는 js와 css를 사용해서 만들 수 있다. 일반적 헤더 구조까지는 다 만들어둔 걸 가정하고 시작한다.

 

 

1. 우선 html의 헤더는 id="header"을 갖고 있어야 한다. id가 있어야 script에서 헤더 제어가 가능하다. 또한 헤더의 배경색으로는 아무것도 넣지 않고, position:fixed; 를 처리해서 스크롤을 내려도 상단에 계속 고정되게 한다.

 

2. css 파일 header css부분 아래쪽에 on이라는 클래스를 덧붙여 준다. (굳이 on이 아니어도 된다. 편의상 정한 이름. 여기서 on 클래스는 html이 아니라 css쪽에만 만드는 클래스다. 우린 스크롤을 내릴 때 '헤더의 색'을 바꾸고 싶기 때문에!)

만약 css라면 #header .on{ }이 될 것이며 scss를 쓰고 있다면 & .on { }을 통해 자기자신을 가리키도록 정해줘야 한다. 

 

3. on 클래스에, 스크롤을 내렸을 때 원하는 헤더의 모양대로 마음껏 설정해준다. 가령 나는 

    color: #111;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
    background-color: #fff;

이렇게 글자색 검정, 박스 아래 그림자를 주어 공간을 띄우고, 백그라운드 색을 흰색으로 깔아주기로 했다. 

 

4. 여기부터 js의 영역이다. html문서의 script 내부에, 스크롤을 내렸을 때 on 클래스가 스윽 나타나고, 스크롤을 내리지 않을 때는 투명한 헤더 배경 상태로 유지되게 하는 java script를 간단하게 넣어줘야 한다.

 

const header = document.querySelector("#header");
      window.addEventListener("scroll", function () {
        console.log("스크롤이 되고 있습니다.");
        console.log(window.scrollY);
      });

addEventListener은 사용자 행동을 받아들이는 수용기 같은 부분이다. 해석하자면 "scroll"하는 행위를 탐지하도록 하는 것.

따라서 위처럼 써두고 console창에 가서 확인해보면 스크롤 Y의 장황한 숫자와 "스크롤이 되고 있습니다."라는 문구가 성공적으로 뜨는 것을 볼 수 있다.(만약 적용이 제대로 된다면!)

이제 작동하는지 확인할 때 쓴 저 부분은 지우고, scroll 수치에 맞춰 on 클래스가 나타나도록 if문을 짜주면 된다. 

 

 

const header = document.querySelector("#header");
      window.addEventListener("scroll", function () {
        if (window.scrollY > 0) {
          header.classList.add("on");
        } else {
          header.classList.remove("on");
        }
      });

 

• 저 "on"부분은 다른 클래스명으로 정했다면 그 이름으로 넣어야 함에 주의한다. 반드시  on일 필요 X!!!

 

scrollY가 0보다 클 때, 즉 스크롤이 아래로 내려왔을 때에는 클래스가 add 되게 해주고, 그게 아닐 때 즉 맨 위에 있을 때는 클래스가 remove 되어 눈에 보이지 않도록 해준다.

이러면 사용자의 스크롤에 반응해 클래스가 나타났다 사라졌다하며 헤더의 모양이 바뀌는 효과를 볼 수 있다. 변화의 과정이 매끄럽기를 원한다면 header 의 css에 transition: all 0.5s ease; 를 넣어주면 더 좋을 것이다.