CSS { position: sticky }

CSS position: sticky 속성을 소개합니다.

position: sticky 속성을 적용한 박스는 평소에 문서 안에서 position: static 상태와 같이 일반적인 흐름에 따르지만 스크롤 위치가 임계점에 이르면 position: fixed와 같이 박스를 화면에 고정할 수 있는 속성입니다.

아직 Working Draft 단계이고요. IE 11 브라우저와 안드로이드 4.x 이하 버전에서 지원하지 않습니다. 하지만 점진적 향상 기법의 한 예로 들기에 적절해 보여요. 최신 명세를 지원하는 브라우저에서는 이 속성이 멋지게 동작하지만 그렇지 않은 브라우저에서는 position: static 상태만 표시하기 때문에 어색하지 않게 표시할 수 있는 속성입니다.

.sticky {
    position: -webkit-sticky; /* 사파리 브라우저 지원 */
    position: sticky;
    top: 4px;
    background: red;
}

이 글에서 사용하는 용어

  • fixed 박스: position: fixed 속성을 적용한 박스.
  • sticky 박스: position: sticky 속성을 적용한 박스.
  • scroll 박스: overflow: auto 또는 overflow: scroll 속성을 적용한 가장 가까운 조상 박스.

sticky 박스의 특징

  • sticky 박스top, right, bottom, left 속성이 필수입니다.
  • fixed 박스는 뷰포트에 고정하지만 sticky 박스scroll 박스에 고정합니다. 즉, scroll 박스offset 기준입니다.
  • 뷰포트와 scroll 박스가 동일한 것처럼 보이는 경우도 있겠지만 뷰포트는 하나뿐이고 scroll 박스는 문서 안에서 더 많이 생성할 수 있어요.
  • sticky 박스scroll 박스에 고정하는 임계점은 스크롤 위치가 결정합니다. sticky 박스 자신과 부모의 위치와 크기도 임계점에 영향을 미칩니다.
  • sticky 박스의 부모 박스가 scroll 박스를 벗어나면 sticky 박스는 다시 일반적인 흐름에 따릅니다.
  • sticky 박스scroll 박스 사이에 overflow: hidden 속성을 적용한 박스가 끼어들면 sticky 박스는 일반적인 흐름에 따릅니다.

지원 브라우저 분기하기

만약 position: sticky 속성을 지원하는 브라우저에만 이 스타일을 적용하려면 @supports 규칙을 이용할 수 있습니다. @supports 규칙은 IE 11 브라우저가 지원하지 않네요.

@supports (position: sticky) or (position: -webkit-sticky) {
    .sticky {
        position: -webkit-sticky; /* 사파리 브라우저 지원 */
        position: sticky;
        top: 4px;
        background: red;
    }
}

position: sticky 속성은 조만간 레진코믹스 ‘연재, TOP 100, 완결, 단행본’ 페이지 요일과 장르 탭에 적용 예정입니다. 레진코믹스 웹은 IE 11과 안드로이드 4.x 브라우저를 지원하지만 position: sticky 속성으로 구현한 UI는 IE 11 브라우저와 안드로이드 4.x 이하 버전에서 지원하지 않습니다.

position: sticky 참고