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;
}
position: fixed 속성을 적용한 박스.position: sticky 속성을 적용한 박스.overflow: auto 또는 overflow: scroll 속성을 적용한 가장 가까운 조상 박스.top, right, bottom, left 속성이 필수입니다.offset 기준입니다.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 이하 버전에서 지원하지 않습니다.