article

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;
}

이 글에서 사용하는 용어

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 참고