[JS 포트폴리오 만들기] 스크롤 시 상단바 고정 및 색상바꾸기

2022.03.17

 

 

---

🤔❓ 페이지를 스크롤 시, 상단바가 고정되면서 색상이 변하도록 만들고 싶다.

오늘부터는 JS를 입혀 조금 더 페이지를 동적으로 만드려 한다.

페이지를 스크롤링 할 때, 상단에 네비게이션바가 고정되도록 만들고, 상단바의 색상에 변화를 주려 한다.

 

---

😃❗현재 스크롤링 된 Y값의 좌표가 상단바의 Y값 좌표보다 크다면 상단바를 고정시킨다.

방법은 크게 두가지로 나눌 수있다.

하지만 처음 프로그래밍을 하다보니 상단바를 고정시키려면 어떤 명령을 해줘야할지 감이 잡히지 않는다. 그래서 일단은 방법론을 찾기로 한다.

 

 

0) 방법론을 찾아보자.

먼저, 구글에 들어가 구글링을 한다.

나는 'js fix navbar when scrolling'이라 검색했다. 일반적으로 영어로 검색하는 것이 더 많은 정보를 얻을 수 있다.

꼭 문장이 아니더라도 본인이 원하는 단어만 나열해도 원하는 결과를 얻을 수 있다. ('js scroll topbar fix' 이런 식으로)

 

가장 처음 검색된 How to create a sticky nav bar 라는 문서를 통해 아래와 같은 내용을 확인한다.

상단바(navbar)의 Top좌표값을 가져오고, 현재 스크롤한 위치가 상단바 Y좌표값이 더 크면 'sticky'라는 클래스를 넣어준다.

이때, 'sticky'라는 클래스는 css에 미리 지정해놓는다.

참고로 Y좌표값을 찾는 이유는 스크롤이 '수직 vertical'으로 이뤄지기 때문이다.

 

물론 처음부터 '아 그렇구나'라고 알지는 못하기에 다른사람들이 적용한 방법론들도 다 찾아본 후에, 공통적으로 사용하는 방법을 알게 됐다. 하지만 각각 사용하는 property가 달라 각각의 방법에 대해 어떻게 적용하면 될지 알아보며 각 property에 대해서도 뭐가 다른지 알아보도록 하려한다.

 

 

1) 어떻게 현재 스크롤링 된 Y값의 좌표를 알아낼까?

역시 먼저 구글링을 한다. 'how to know current y position mdn'이라 검색하니 window.scrollY라는 문서를 보여준다.

scrollY: 스크롤된 window의 현재 Y좌표값을 알고 싶을 때 사용한다.
scrollX: 수평방향의 좌표를 알고싶다면 scrollX를 사용하면 된다.

scrollY와 똑같은 기능을 하는 property가 있는데 바로 window.pageYOffset이다.

오래된 브라우저에서는 scrollY property가 작동되지 않을 수 있기 때문에 pageYOffset을 사용하면 된다고 하는 것을 보니 scrollY가 더 최신문법인가보다. 브라우저간의 호환성을 위해서는 조건문을 통해 두가지 property를 모두 사용하는 것으로 보인다.

 

하지만 브라우저 호환성을 보니 모든 브라우저에서 적용가능한 것으로 보아 그냥 scrollY를 사용해도 무방할 것 같다.

 

// 스크롤 시 navbar 고정시키기

document.addEventListener("scroll", () => {
  const scrollY = window.scrollY;
  console.log(scrollY)
});

크롬 개발자도구(mac 단축키: option + commnad + i)로 확인해보니 잘 작동하는 것으로 보인다.

 

 

2) 상단바의 Y값(높이값)은 어떻게 알아내지?

window 좌표 및 해당 용어

 

(1) Element.offsetTop

이제 상단바의 Y값 좌표를 찾으면 된다. how to know navbar y position mdn 라고 검색하여 Element.offseTop을 확인한다.

Element.offsetTop : 가장 가까운 relative 속성을 가진 부모element의 inner border의 top에서
현재element의 outer border까지 거리를 반환한다.

 

일단, 부모element에서의 거리를 알고싶은게 아니라, 윈도우에서의 거리를 알고싶은거니 해당 property는 내가 찾는게 아닌거 같다.

게다가 크롬 개발자모드에서 테스트해보니 값이 고정되지않고 계속 움직인다. (Y값의 높이를 반환한다면 값이 일정수준에서 고정되어야 한다.)

 

 

(2) window.innerHeight

윈도우 브라우저 창 사이즈

 

window 안쪽의 높이를 반환한다. 하지만 내가 알고싶은건 window 높이가 아니고 element의 높이이니 넘어간다.

참고로 clientHeight라는 property가 있다. 이는 스크롤바랑 border까지 제외한 후의 순수 브라우저페이지의 높이를 보여준다.

 

window.innerHeight: window - any borders
element.clientHeight: window - (horizontal scrollbar + any borders)

 

(3) Element.getBoundingClientRect() / Element.clientHeight

clientHeight가 순수 브라우저 창 사이즈의 크기를 반환하는 것 같으니 한번 확인해본다.

Element.clientHeight: CSS height + CSS padding - horizontal scrollbar height

오, padding을 포함한 element의 높이를 알려준다. 왠지 이거면 될 것 같다.

 

아래 내려보니 element.getBoundingClientRect()라는 property가 있다. clinetHeight랑 같은 동일한 기능을 하는 것 같다.

element.clinetHeight: '정수 integer'로 값을 반환
element.getBoundingClientRect(): '소수 float'로 값을 반환

둘다 똑같은 역할을 한다하니 둘다 사용해보도록 한다.

 

const navbar = document.querySelector("#navbar"); //from HTML

document.addEventListener("scroll", () => {
  const scrollY = window.scrollY;
  const clientHeight = navbar.clientHeight;
  const clientRect = navbar.getBoundingClientRect();
  
  console.log(`scrollY: ${scrollY}`)
  console.log(`clientHeight: ${clientHeight}`);
  console.log(`clientRect: ${clientRect}`);
});

크롬 개발자도구로 확인해보니 잘 작동하는 것 같다. 근데 clientRect는 'Object DOMRect'라고 뜬다.

뭔가 배열(여러가지 값이 조합되어서)로 이뤄져있나보다. DOMRect를 검색해보니 사각형의 사이즈와 포지션을 설명한 것이라 한다.

그렇다면, 뭔가 element의 모든 정보를 다 담고 있는 object형태로 이뤄져있고, 그 중에서 내가 원하는 height만 쏙!하고 가져오는 것이 아닐까!라는 생각이 든다.

 

document.addEventListener("scroll", () => {
  ...
  const clientRect = navbar.getBoundingClientRect().height; //.height를 추가했다.
});

 

꺄?! 맞다?!!!ㅎㅎㅎㅎ 신난다.ㅋㅋㅋㅋ 아 뭔가 이렇게 검색해서 찾아냈을 때의 뿌듯함!!! 아 너무 좋다.ㅋㅋㅋㅋ

 

신이나 신이나 에템에템 신이나!!!

 

 

3) 코딩을 실시한다.

원하는 조건은 모두 찾았으니 이제 잘 조합해보도록하자.

 

(1) 상단바 고정시키기

[css]

/* navbar */
#navbar {
  display: flex;
  justify-content: space-between;
  position: fixed; /*navbar 상단고정*/
  width: 100%; /*navbar가 가로영역 100% 사용할 수 있도록 설정*/

  color: var(--color-dark-gray);
  background-color: transparent; /*기본으론 투명으로 설정했다가, 스크롤링하면 색상이 변하도록*/
  transition: all var(--animation-duration) ease-in; /*스크롤링할 때 자연스럽게 색이 입혀지도록 애니메이션추가*/
}

#navbar.fixed {
  background-color: var(--color-pink);
}

상단바 고정은 생각보다 쉬웠다. position property를 이용해서 css에 상단바(navbar)의 position을 "fixed"로 바꿔주면 된다.

 

(2) 상단바 색상 바꾸기

색상을 바꾸기 위해서는 css에 "fixed"라는 클래스가 추가됐을 경우, 적용되는 조건을 입력해준다.

스크롤링 하면 색이 입혀지도록 기존 상단바의 조건도 투명하게 바꿔줬다. 

 

[JS]

// 스크롤 시 navbar 색상 바꾸기
const navbar = document.querySelector("#navbar"); //from HTML
const navbarHeight = navbar.getBoundingClientRect().height;

document.addEventListener("scroll", () => {
  const scrollY = window.scrollY;

  //navbar의 높이가 현재까지 스크롤 된 Y값보다 작다면 navbar에 fixed라는 클래스를 넣어라.
  //1) 삼항연산자 사용
  navbarHeight < scrollY ? navbar.classList.add("fixed") : navbar.classList.remove("fixed");
  
  //2) if문 사용
  if (window.scrollY > navbarHeight) {
    navbar.classList.add("fixed");
  } else {
    navbar.classList.remove("fixed");
  }
});

 

JS로 넘어가서, 스크롤 시 상단바의 상태에 변화를 주기위해 상단바의 id(여기에선 "navbar")를 불러온다.

 

그리고 상단바의 높이가 현재까지 스크롤 된 Y좌표값보다 작다면 "navbar"라는 id에 class "fixed"를 추가하고, 그렇지 않으면 제거해라. 라는 명령을 적어준다.

 

조건문이어서 삼항연산자로 적어봤다.

 

navbar에 classList추가가 잘 돼었는지 크롬 개발자모드에서 확인해본다.

 

z-index

엇 그런데 아래로 내리니 상단바 위쪽으로 올라오는 요소들이 있다.

이럴때에는 css에서 상단바의 z-index값을 1로 주면 된다.

 

#navbar {
  display: flex;
  justify-content: space-between;
  position: fixed; /*navbar 상단고정*/
  width: 100%;
  z-index: 1; /*가장 최상위로 올라오도록*/

  color: var(--color-dark-gray);
  background-color: transparent;
  transition: all var(--animation-duration) ease-in;
}

 

z-index가 뭐야? 라고 하기엔 이름이 딱 봐도 사용자 쪽으로 올라오는 3차원 축을 말하는 것 같다. 해당 축을 가장 상단으로 올린다는 의미인 것 같다.

 

 

완성! 상단바 애니메이션이 잘 적용된다.

 

 

이렇게 

---

뭔가, 상단바 하나 고정시키고 투명하게 만드는데도 이렇게 시간이 많이 걸릴 줄이야... 조금 멘붕이었지만 이렇게 하나씩 알아가는거라고 생각한다.

 

해당 프로젝트는 아래 github에 업로드해두었다.

 

eunne's github: https://github.com/eunne/Project_Portfolio.git