🎨 position sticky - 위에 헤더를 고정하자

네비게이션 헤더 고정하기

대다수의 사이트가 상단 네비게이션 영역 부분이 스크롤을 내리면 같이 따라 내려오는 페이지 요소를 한번 쯤은 봐왔을 것이다. 이전에는 이러한 기능을 만들려면 자바스크립트로 복잡한 구성을 하여야 했지만 이제는 간단하게 css의 position: sticky 속성으로 구현이 가능하다.

예를들어 아래와 같이 <header> 요소 영역 부분을 스크롤을 내려도 상단에 고정시키고 싶다면,

<header>
  <h1>Logo</h1>
  <nav>
    <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
    </ul>
  </nav>
</header>

<main>
	내용 ...
</main>

See the Pen position-sticky-0 by barzz12 (@inpaSkyrim) on CodePen.

아래와 같이 속성을 설정해주면 상단 헤더 고정이 되게 된다.

header {
	...
    position: sticky;
    top: 0;
}

See the Pen position-sticky-1 by barzz12 (@inpaSkyrim) on CodePen.

---

Position 속성 종류 비교

기본 적으로 css의 position속성은 html 요소의 위치를 설정해주는 역할을 한다. 아마 대부분 이 속성값으로 relative나 absolue 값을 설정하고 top, left 속성으로 요소의 위치 좌표를 조정해본 경험들이 있을 것이다.

sticky를 알아보기전 이해를 위해 간단하게 positoin 속성값에 대해 차이 비교를 빠르게 훑고 넘어가보자.

1. static : 정적의 고정 위치. 기본 설정값
2. relative : 상대적 기준 위치. 부모의 위치를 기준으로 위치를 잡는다.
3. absolute : 절대적 기준 위치
4. fixed : 고정 위치. 특정 좌표에 고정되어 표현
5. sticky : 처음엔 static 속성과 같이 동작하다가 스크롤시 지정 지점에서 요소를 fixed 처럼 고정

아래 예제를 통해 각 속성들이 스크롤시 어떤식으로 작동하는지 알 수 있을 것이다.

See the Pen position-sticky by barzz12 (@inpaSkyrim) on CodePen.

 

Position Sticky 속성 특징

nav.sticky {
  position: sticky;
  top: 100px;
}

sticky 속성은 어찌 보면 static과 fixed 속성의 특징을 혼합한 속성이라 할 수 있다. 스크롤하지 않을 때는 static position처럼 동작하다가 스크롤할 때 영역을 만나면 fixed position 으로 동작 되기 때문이다.

예를 들어 요소의 sticky 속성이 위의 코드 처럼 설정되어 있다면, 요소 영역이 설정된 위치(top: 100px)에 도달하기 전까지는 정적 위치에 있다가 스크롤을 내려 설정된 위치에 다다르면 고정 위치로 동작되게 된다.

이러한 동작 원리 때문에 sitcky 기능을 사용하려면 필수적으로 top, bottom, left, right들 중에 하나를 설정해주어야 한다.

---

Position Sticky 예제

See the Pen Position sticky by Daryll Jann (@darylljann) on CodePen.

See the Pen position: sticky example by Dudley Storey (@dudleystorey) on CodePen.

See the Pen CSS position: sticky by Kseso (@Kseso) on CodePen.

See the Pen CSS `position: sticky` example by Jeff Wainwright (@yowainwright) on CodePen.

---

sticky 속성이 동작하지 않을때

이처럼 편리하게 인터랙티브(interactive)한 요소를 구성할 수 있지만 sticky 속성은 적용하기 위한 사전 단계가 조금 까다롭다. 다음은 sticky 속성이 동작하지 않을 때 점검해봐야 할 점들에 대한 정리본 들이다. 만일 동작이 안되면 빠뜨린 부분이 있는지 세세히 확인해보자.

 

사전 점검 사항

 

1. 스크롤 도달 위치 설정 확인

위에서 언급하였듯이 sticky 엘리먼트는 top, bottom, left, right 속성 중 하나는 반드시 필요하다. 그래야 어느 위치 지점에서 고정 위치로 동작할지 기준이 생기기 때문이다.

.sticky {
  position: sticky;
  top: 0; /* 필수 */
}

 

2. 부모 노드에 overflow 속성 설정 확인

sticky 속성이 적용된 노드의 부모 또는 조상 노드에 overflow 설정이 되어 있으면 동작하지 않는다.

많이들 실수하는 점이 웹사이트가 가로 100%를 넘지 않게 만들기 위해서 최상단 요소에 overflow-x: hidden과 같은 가로 스크롤 관련 설정을 추가하여, 세로 스크롤에 반응하는 sticky와 관련 없는 줄 알고 적용하는 점이다. 이 역시 반응하지 않는다.

overflow: hidden
overflow: scroll
overflow: auto

 

 

3. 부모 노드의 height가 설정되어 있는지 확인

sticky 속성을 갖는 엘리먼트의 부모 노드는 반드시 height가 설정되어 있어야 한다는 점이다. 그렇지 않으면 sticky 속성의 엘리먼트는 stiatc 속성처럼 동작하게 된다. 다만 height: 150% 같이 퍼센트로 설정한 경우에도 동작하지 않는다.

참고로 body 같은 경우 자동으로 height를 잡아주기 때문에 sticky 요소 부모가 body라면 설정을 해 줄 필요는 없다.

 

4. 브라우저 지원 확인

IE 11 이하 버전은 sticky 속성에 대해 지원하지 않는다.

---

# 참고자료

https://www.daleseo.com/css-position-sticky-header/

https://deeplify.dev/front-end/markup/position-sticky