[HTML/CSS] Position sticky 적용 방법

css의 position에는 다양한 종류의 다양한 속성이 있습니다. 이 글에서는 static 속성과 fixed 속성의 특징을 동시에 갖고 있는 position sticky속성의 특성에 대해서 알아보겠습니다.

또 sticky 속성이 동작하지 않을 때 확인해야할 것들에 대해서 정리해드리겠습니다.

Postion sticky

sitcky 속성은 필수적으로 top, bottom, left, right들 중에 하나를 필수적으로 설정해주어야 합니다. sitcky로 설정된 영역은 설정된 위치(예 top: 0px)에 도달하기 전까지는 static 속성처럼 행동하다가 설정된 위치에 다다르면 fixed 속성처럼 행동하는 속성입니다.

sticky 속성

.sticky {
  position: sticky;
  top: 0;
  background: #8a4baf;
}

sticky 속성은 static과 fixed 속성의 특징을 모두 가지고 있는 속성입니다. sticky 영역의 x 또는 y 위치값이 설정한 위치에 도달하기 전까지는 static, 도달 이후에는 fixed처럼 행동하게 됩니다.

예제에서는 div.sticky 영역의 위치를 top: 0;으로 설정했습니다.

뷰포트의 관점에서 최초에 페이지가 랜더링 되었을 때,

• div.sidebar 영역은 div.nav 아래에 있는 div.container안에 있기 때문에 div.sidebar의 y좌표는 0보다 큼.
• div.sticky 영역은 div.sidebar 내부의 상단에 위치하기 때문에 div.sticky의 y좌표도 0보다 큼.

div.sticky 영역이 아직 설정한 위치인 top: 0;에 도달하지 않았기 때문에 마치 static 속성으로 설정한 것처럼 보이게 됩니다.

이 상태에서 스크롤을 하단으로 내리면 div.sticky 영역이 뷰포트의 y 좌표 0에 도달하는 순간, 이 영역은 fixed 속성처럼 행동하게 됩니다.