CSS position: sticky를 활용한 상세 예제

CSS에서 position: sticky는 스크롤 동작에 따라 요소가 정렬되거나 고정된 위치에 머물게 하는 데 사용됩니다. 이는 고정(fixed) 위치와 상대(relative) 위치의 특성을 모두 활용할 수 있는 CSS 속성으로, 사용자가 웹 페이지를 스크롤할 때 특정 UI 요소가 보이는 영역 내에 머물도록 만드는 데 유용합니다. 이 글에서는 position: sticky의 동작 원리, 활용 방법, 다양한 예제, 그리고 주의 사항을 상세히 설명하겠습니다.

---

1. position: sticky의 동작 원리

1.1 정의

sticky는 상대적인 위치에서 시작해, 특정 조건을 충족하면 고정 위치로 전환됩니다. 이를 통해 요소가 스크롤 영역에서 특정 지점에 도달했을 때만 고정됩니다.

1.2 기본 동작 조건

1. sticky 속성을 가진 요소는 반드시 부모 또는 조상 요소의 스크롤 컨테이너 내에 있어야 합니다.
2. 요소가 뷰포트(viewport) 내에서 특정 위치에 도달하면 고정됩니다.
3. top, bottom, left, right와 같은 위치 지정 속성 중 하나를 설정해야 합니다.
4. 부모 컨테이너의 경계를 벗어나면 고정이 해제됩니다.

---

2. 기본 사용법

2.1 기본 문법

.sticky-element {
  position: sticky;
  top: 10px; /* 스크롤 시 요소가 뷰포트 상단에서 10px 떨어진 곳에 고정 */
}

2.2 HTML 구조

<div class="container">
  <div class="sticky-element">고정될 요소</div>
  <p>긴 텍스트 내용...</p>
</div>

2.3 CSS

.container {
  height: 2000px; /* 스크롤 가능한 높이 */
  background-color: #f5f5f5;
  padding: 20px;
}

.sticky-element {
  position: sticky;
  top: 20px;
  background-color: #ffcccb;
  padding: 10px;
  border: 1px solid #333;
}

이 코드를 실행하면 .sticky-element는 스크롤 시 컨테이너 상단에서 20px 떨어진 지점에 고정됩니다.

---

3. position: sticky의 실전 활용 예제

3.1 제목 고정

웹 문서에서 각 섹션의 제목을 스크롤 시 상단에 고정하는 예제입니다.

HTML

<div class="section">
  <h2 class="sticky-title">섹션 1</h2>
  <p>섹션 1의 내용...</p>
</div>
<div class="section">
  <h2 class="sticky-title">섹션 2</h2>
  <p>섹션 2의 내용...</p>
</div>
<div class="section">
  <h2 class="sticky-title">섹션 3</h2>
  <p>섹션 3의 내용...</p>
</div>

CSS

.section {
  height: 400px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  padding: 20px;
}

.sticky-title {
  position: sticky;
  top: 0;
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

결과

스크롤 시 각 섹션의 제목이 섹션 상단에 고정되어 가독성이 향상됩니다.

---

3.2 사이드바 고정

블로그나 문서의 사이드바 메뉴를 고정해 사용자가 스크롤하면서도 메뉴를 쉽게 접근할 수 있도록 구현합니다.

HTML

<div class="layout">
  <div class="sidebar">
    <ul>
      <li><a href="#section1">섹션 1</a></li>
      <li><a href="#section2">섹션 2</a></li>
      <li><a href="#section3">섹션 3</a></li>
    </ul>
  </div>
  <div class="content">
    <h2 id="section1">섹션 1</h2>
    <p>섹션 1의 내용...</p>
    <h2 id="section2">섹션 2</h2>
    <p>섹션 2의 내용...</p>
    <h2 id="section3">섹션 3</h2>
    <p>섹션 3의 내용...</p>
  </div>
</div>

CSS

.layout {
  display: flex;
}

.sidebar {
  position: sticky;
  top: 20px;
  width: 200px;
  background-color: #f0f0f0;
  padding: 10px;
}

.content {
  margin-left: 220px;
  padding: 20px;
}

결과

사이드바는 화면 상단에서 20px 떨어진 위치에 고정되어 콘텐츠를 읽는 동안 항상 보입니다.

---

3.3 테이블 헤더 고정

긴 테이블에서 헤더가 항상 보이도록 구현하는 예제입니다.

HTML

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>항목</th>
        <th>설명</th>
        <th>가격</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>항목 1</td>
        <td>설명 1</td>
        <td>1000</td>
      </tr>
      <!-- 더 많은 행 추가 -->
    </tbody>
  </table>
</div>

CSS

.table-container {
  max-height: 300px;
  overflow-y: auto;
}

thead th {
  position: sticky;
  top: 0;
  background-color: #ddd;
  z-index: 10;
}

결과

스크롤 시 테이블 헤더가 항상 상단에 고정되어 데이터 가독성이 높아집니다.

---

4. position: sticky 활용 시 주의사항

1. 부모 컨테이너 제한
   sticky 요소는 부모 컨테이너의 경계를 벗어나지 않습니다. 부모 요소가 overflow: hidden 또는 overflow: auto를 가지면 예상치 못한 동작을 유발할 수 있습니다.
2. z-index 관리
   다른 요소가 sticky 요소를 덮지 않도록 z-index를 적절히 설정해야 합니다.
3. 브라우저 지원
   position: sticky는 대부분의 최신 브라우저에서 지원되지만, 일부 구형 브라우저에서는 동작하지 않을 수 있습니다. 이를 보완하기 위해 적절한 폴백 스타일을 제공해야 합니다.

---

5. 실제 사례

5.1 쇼핑몰 내 카트 고정

사용자가 상품을 스크롤하면서도 카트를 항상 화면에 보이게 구현.

5.2 뉴스 웹사이트 제목 고정

기사 제목이나 카테고리를 고정하여 사용자가 현재 읽고 있는 기사의 위치를 쉽게 파악.

---

결론

position: sticky는 UI/UX를 개선하고 사용 편의성을 높이는 강력한 도구입니다. 다양한 환경에서 유용하게 적용할 수 있으며, 사용자 경험을 크게 향상시킬 수 있습니다. 블로그, 뉴스, 쇼핑몰 등 여러 사이트에서 활용해 보세요!