position: sticky는 요소의 위치를 지정하는 새로운 방법으로 개념적으로 position: fixed와 유사합니다. 차이점은 position: sticky가 있는 요소는 표시 영역에서 지정된 오프셋 기준점이 충족될 때까지 상위 요소 내에서 position: relative처럼 동작한다는 점입니다.
사용 사례
이 기능에 관한 에드워드 오코너의 원래 제안서를 발췌하여 요약하면 다음과 같습니다.
고정된 게재위치 소개
position: sticky (공급업체 접두사)를 추가하기만 하면 사용자가 항목 (또는 상위 요소)을 스크롤하여 상단에서 15px가 될 때까지 요소가 position: relative이 되도록 지정할 수 있습니다.
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 15px;
}
top: 15px에서 요소가 고정됩니다.
이 기능을 실용적인 환경에서 보여주기 위해 스크롤할 때 블로그 제목을 고정하는 데모를 만들었습니다.
이전 접근 방식: 스크롤 이벤트
지금까지 고정 효과를 얻기 위해 사이트는 JS에서 scroll 이벤트 리스너를 설정했습니다. 실제로 html5rocks 튜토리얼에서도 이 기법을 사용합니다. 1200픽셀보다 작은 화면에서는 일정량 스크롤하면 목차 사이드바가 position: fixed로 변경됩니다.
다음은 사용자가 아래로 스크롤할 때 뷰포트 상단에 고정되고 사용자가 위로 스크롤할 때 제자리로 돌아가는 헤더를 만드는 방법입니다 (이제 이전 방법).
<div class="header"></div>
<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? header.classList.add('sticky') :
header.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);
</script>
http://output.jsbin.com/omanut/2/에서 사용해 보세요.
이는 간단하지만 사용자가 스크롤할 때 블로그의 모든 <h1> 제목과 같은 여러 DOM 노드에 대해 이 작업을 수행하려고 하면 이 모델이 빠르게 중단됩니다.
JS가 이상적이지 않은 이유
일반적으로 스크롤 핸들러는 좋은 방법이 아닙니다. 사람들은 너무 많은 작업을 하고 UI가 왜 버벅거리는지 궁금해합니다.
또한 점점 더 많은 브라우저에서 성능을 개선하기 위해 하드웨어 가속 스크롤을 구현하고 있습니다. 문제는 JS 스크롤 핸들러가 작동하는 경우 브라우저가 더 느린 (소프트웨어) 모드로 대체될 수 있다는 점입니다. 이제 더 이상 GPU에서 실행되지 않습니다. 대신 CPU로 돌아갑니다. 그 결과 사용자가 페이지를 스크롤할 때 더 많은 버벅거림을 느낍니다.
따라서 이러한 기능을 CSS에서 선언적으로 사용하는 것이 좋습니다.
지원
안타깝게도 이 사양에 대한 사양은 없습니다. 이 기능은 지난 6월 www-style에서 제안되었으며 WebKit에 도착했습니다. 즉, 참고할 만한 문서가 없습니다. 단, 이 버그에 따르면 left와 right이 모두 지정된 경우 left가 우선 적용됩니다. 마찬가지로 top와 bottom가 동시에 사용되면 top가 이기게 됩니다.
현재 Chrome 23.0.1247.0 이상 (현재 Canary) 및 WebKit Nightly가 지원됩니다.