position:fixed가 Chrome에 다시 지원됨

4년 전 에릭 비델만은 당시 Chrome과 Safari를 비롯한 여러 브라우저를 지원하는 엔진이었던 position: stickyWebKit에 도입되었다는 사실을 다룬 멋진 블로그 게시물을 올렸습니다. 1년 후, 웹 개발자들의 실망스러운 점은 '현재 구현이 기존 스크롤 및 합성 시스템과 잘 통합되는 방식으로 설계되지 않았기 때문에' Chrome에서 position:sticky를 삭제했기 때문입니다.

'스크롤과 컴포지션 작업을 마쳤으면 position: sticky로 돌아가서 엔진의 나머지 부분과 잘 통합되는 방식으로 기능을 구현해야 합니다.'라는 버그에 따라 항상 Chrome에 다시 적용하고자 했습니다. 구현을 추적하는 메타 버그는 2013년부터 작업해 왔습니다.

좋은 소식은 Chrome 56 (2016년 12월 현재 베타 버전, 2017년 1월 안정화 버전)부터 position: sticky가 Chrome에 다시 제공된다는 점입니다.

위치:고정이란 무엇인가요?

여기까지 오래 걸리는데 왜 여기까지 오나요?

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 (yay), Firefox, Safari에서 사용할 수 있습니다. position:sticky에 관한 자세한 내용은 다음과 같습니다.