4년 전 에릭 비델만은 당시 Chrome과 Safari를 비롯한 여러 브라우저를 지원하는 엔진이었던 position: sticky가 WebKit에 도착했다는 사실에 관한 멋진 블로그 게시물을 작성했습니다. 1년 후 웹 개발자의 우려에 따라 Chrome에서 position:sticky를 삭제했습니다. '현재 구현은 기존 스크롤 및 컴포지션 시스템과 잘 통합되도록 설계되지 않았기 때문'입니다.
버그에서 언급한 대로 스크롤 및 컴포지션을 정리한 후에는 항상 position:
sticky로 돌아가서 나머지 엔진과 잘 통합되는 방식으로 이 기능을 구현하고 싶었습니다. 구현을 추적하는 메타 버그는 2013년부터 처리되었습니다.
좋은 소식은 Chrome 56 (현재 2016년 12월 기준 베타, 2017년 1월 기준 안정화 버전)부터 position: sticky가 Chrome에 다시 도입되었다는 것입니다.
position:sticky는 무엇인가요?
여기에 도달하는 데 시간이 좀 걸렸는데, 왜 이 기능에 기대가 크나요?
position:sticky는 요소를 표시 영역에 고정 (즉, 화면 상단에 고정)할 수 있는 CSS 위치 지정 속성이지만, 상위 요소가 표시 영역에 표시되고 임곗값 내에 있는 경우에만 사용할 수 있습니다. 뷰포트에 고정되지 않으면 요소는 position: relative인 것처럼 작동합니다. 이는 요소를 뷰포트 상단에 고정하기 위해 onscroll 이벤트 핸들러에서 JavaScript를 사용할 필요가 없도록 하는 매우 멋지고 간단한 플랫폼 추가 기능입니다.
블로그에 표시되는 모습입니다. 이렇게 하면 제가 다소 길고 지루한 도움말을 작성할 때 현재 섹션의 헤더를 화면 상단에 유지할 수 있습니다. :\
이 기능을 구현하려면 고정하려는 요소의 position 속성 값이 sticky여야 한다고 지정합니다.
또한 고정해야 하는 위치에 오프셋을 추가할 수도 있습니다.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
이전 예에서는 <h3> 요소를 뷰포트 상단에서 10픽셀 떨어진 위치에 고정합니다. 뷰포트 상단에 직접 고정하려면 top 속성을 top: 0px로 설정합니다.
이 기능에 대한 지원은 매우 강력합니다. Chrome, Firefox, Safari에서 사용할 수 있습니다. position:sticky에 관한 자세한 내용은 다음과 같습니다.