position: sticky는 요소를 배치하는 새로운 방법이며 개념적으로 position: fixed와 유사합니다. 차이점은 position: sticky가 있는 요소는 표시 영역에서 지정된 오프셋 기준점이 충족될 때까지 상위 요소 내에서 position: relative처럼 동작한다는 점입니다.
사용 사례
이 기능에 대한 에드워드 오코너의 원래 제안을 인용한 문구입니다.
고정 위치 소개
position: sticky (공급업체 접두사)를 추가하기만 하면 사용자가 항목 (또는 그 상위 요소)을 상단으로부터 15픽셀이 되도록 스크롤할 때까지 요소가 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/로 확인해 보세요.
이 작업은 매우 쉽지만, 여러 DOM 노드(예: 사용자가 스크롤할 때 블로그의 모든 <h1> 제목)에 이 작업을 수행하려는 경우 모델이 빠르게 분할됩니다.
JS가 이상적이지 않은 이유
일반적으로 스크롤 핸들러는 좋은 생각이 아닙니다. 포크는 너무 많은 작업을 하고 왜 UI가 버벅거리는지 궁금해합니다.
성능 향상을 위해 점점 더 많은 브라우저가 하드웨어 가속 스크롤을 구현하고 있다는 점을 고려해야 합니다. 이 문제는 JS 스크롤 핸들러가 실행 중일 때 브라우저가 느린 (소프트웨어) 모드로 되돌아갈 수 있다는 점입니다. 이제 더 이상 GPU에서 실행되지 않습니다. 대신 CPU로 돌아갑니다. 그 결과, 사용자가 페이지를 스크롤할 때 버벅거림이 더 많이 감지된다고 합니다.
따라서 CSS에서 이러한 기능을 선언적으로 지정하는 것이 훨씬 합리적입니다.
지원
안타깝지만 관련 사양이 없습니다. 지난 6월에 www-style에 제안되어 WebKit에 방금 출시되었습니다. 즉, 가리킬 만한 좋은 문서가 없습니다. 하지만 이 버그에 따르면 left과 right가 모두 지정되면 left이 이긴다는 점에 유의하세요. 마찬가지로 top와 bottom가 동시에 사용되면 top가 우선합니다.
현재 Chrome 23.0.1247.0 이상 (현재 Canary) 및 WebKit Nightly가 지원됩니다.