CSS로 스티키 헤더 (sticky header) 만들기

CSS의 sticky position을 이용하여 항상 화면 상단에 항상 달라붙어 있는 헤더(header)를 만들어보겠습니다.

sticky position의 특징

sticky position은 CSS에 비교적 최근에 추가된 포지셔닝 메커니즘인데요. 스크롤하지 않을 때는 static position처럼 동작하다가 스크롤할 때는 fixed position과 유사하게 동작합니다.

position 속성을 sticky로 설정되어 있는 엘리먼트는 마치 position 속성이 static으로 설정되어 있는 것처럼 부모 엘리먼트 내부에서 공간을 차지합니다. 하지만 스크롤할 때는 마치 position 속성이 fixed로 설정되어 있는 것처럼 다른 엘리먼트들이 상하좌우로 움직일 때 지정된 자리에서 움직이지 않습니다.

예제 웹페이지 만들이기

먼저 예제로 사용할 간단한 웹페이지에 대한 기본적인 HTML 마크업과 CSS 스타일로 시작을 하겠습니다.

<header>
  <h1>로고</h1>
  <nav>
    <ul>
      <li>메뉴1</li>
      <li>메뉴2</li>
      <li>메뉴3</li>
    </ul>
  </nav>
</header>

<main>
  <!-- 컨텐츠 -->
</main>

header {
  background: deeppink;
  color: white;
  padding-left: 32px;
  padding-right: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin-left: 16px;
  font-size: 18px;
  font-weight: bold;
}

main {
  padding: 32px;
}

html {
  height: 200%;
  line-height: 1.6;
}

이렇게 static position을 사용하는 헤더는 스크롤바를 아래로 움직이면, 움직이는 만큼 브라우저 화면에서 사라지게 됩니다.

헤더를 화면 상단에 붙이기

자 지금부터, sticky position을 활용해서 위에서 작성한 메뉴바를 화면 상단에 붙여볼까요? 헤더 영역의 position 속성을 sticky로, top 속성을 0으로 설정해줍니다.

header {
  position: sticky;
  top: 0;

  /* 생략 */
}

이제 다시 스크롤을 해보면 메뉴바가 화면 상단에 달라붙어 아무리 아래로 스크롤해도 항상 메뉴바를 볼 수 있는 상태가 됩니다. 🎉

보너스 1: 자연스럽게 붙이기

padding-top 속성으로 헤더 위에 약간의 공간을 더하고, top 속성으로 동일한 오프셋(offset) 공간을 빼주면 헤더를 화면 상단에 좀 더 자연스럽게 붙일 수 있습니다.

header {
  position: sticky;
  padding-top: 32px;
  top: -32px;

  /* 생략 */
}

보너스 2: 아래 비치게 하기

한가지 팁을 더 드리자면, 배경색을 불투명하게 만들고 backdrop-filter 속성을 적절히 주면 헤더 영역 아래로 메인 영역을 살짝 비치게 할 수도 있습니다. 🔮

header {
  position: sticky;
  top: 0;
  backdrop-filter: blur(5px);
  background: rgb(255 20 147 / 0.7); // 불투명 deeppink  /* 생략 */
}

마치면서

이상으로 sticky position을 이용하여 헤더를 화면 상단에 붙이는 방법과 관련해서 유용한 팁을 몇 가지 살펴보았습니다.