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 박스는
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 이하 버전에서 지원하지 않습니다.