[CSS] { position: sticky }

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

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

sticky 박스의 특징

sticky 박스는 top, right, bottom, left 속성이 필수이다.

fixed 박스는 뷰포트에 고정하지만 sticky 박스는 scroll 박스에 고정한다. 즉, scroll 박스가 offset 기준이다.

뷰포트와 scroll 박스가 동일한 것처럼 보이는 경우도 있겠지만 뷰포트는 하나뿐이고 scroll 박스는 문서 안에서 더 많이 생성할 수 있다는 점.

sticky 박스를 scroll 박스에 고정하는 임계점은 스크롤 위치가 결정합니다. sticky 박스 자신과 부모의 위치와 크기도 임계점에 영향을 미친다.

sticky 박스의 부모 박스가 scroll 박스를 벗어나면 sticky 박스는 다시 일반적인 흐름에 따른다.

sticky 박스와 scroll 박스 사이에 overflow: hidden 속성을 적용한 박스가 끼어들면 sticky 박스는 일반적인 흐름에 따른다.

IE 11 브라우저와 안드로이드 4.x 이하 버전에서 지원하지 않는다.