[CSS] 특정 요소를 고정 시켜주는 position sticky 속성을 알아보자

벌써 시간이 꽤 되었는데, 과거에 제가 postion 의 각 속성 값들을 정리한 포스트를 보면, position 소성의 sticky 값은 모든 브라우저가 지원하지는 않는 요소였던 것 같습니다.

그런데 최근에 워드프레스 테마를 만들면서 알게 되었는데, 이제는 거의 모든 브라우저가 sticky 속성을 지원한다고 해서 그 특징과 사용법을 기록으로 남겨 봅니다.

개요

CSS 를 이용해 특정 요소의 position 을 sticky 로 지정해주면, 사용자가 웹페이지를 스크롤 하더라도 그 요소는 화면에 고정되는 효과를 낼 수 있습니다.

그런데 이게 재밌는게, 어떤 웹페이지의 요소가 항상 지정한 요소에 고정되어 있는게 아니라, 만약 사용자가 웹페이지를 위에서 아래로 스크롤 하고 있는데 처음에는 sticky 로 지정된 요소가 보이지 않다가 사용자가 아래쪽으로 스크롤 하면서 그 요소가 화면에 나타나고, 사용자가 더 아래로 스크롤을 하면 그 요소는 미리 지정된 위치해 고정된 상태로 계속 사용자가 보고 있는 화면에 고정됩니다. 그러다가 그 부모 요소의 높이가 끝나는 지점이 되면 다시 일반적인 다른 요소들처럼 스크롤되어 사용자의 화면에서 사라집니다.

무슨 말인지 모르겠다면 아래 영상을 확인해 보시죠.

어떤 느낌인지 아시겠죠?

예전에 이런 기능을 구현하기 위해서는 CSS 와 함께 자바스크립트를 사용하곤 했었습니다.

현재 화면에서 특정 요소의 위치를 찾아내 자바스크립트로 그 위치가 특정 값을 넘어가는지 확인해서 사용자 화면에서 사라지려고 하면 position: fixed 속성을 주면서 화면에 고정시키는 방법을 이용했었죠.

하지만 sticky 속성을 이용한다면 아주 쉽게 구현이 가능합니다.

사용법

CSS 에서 position: sticky 속성을 사용하는 방법은 일반적인 position 속성을 사용할 때와 다르지 않습니다.

한 가지 주의 할 점은 position 만 지정해 주면 되는 것이 아니라, “상단에서 어느 지점에 위 할 것인가”처럼 고정할 위치에 대해서도 반드시 한 가지는 지정해 주어야 한다는 것입니다.

div { position: sticky; top: 16px; }

이렇게 설정할 경우 해당 div 요소는 사용자 화면에 등장하면 상단에서 16px 떨어진 지점에 고정됩니다.

사용 예제

sticky 속성은 아래와 같이 이용할 수 있습니다.

1. PC 버전의 웹페이지가 내용이 담기는 본문과 사이드 바 형식으로 되어 있을 때, 사이드바에서 사용자에게 계속 보여주고 싶은 내용이 담긴 요소를 sticky 로 설정
2. 웹페이지의 상단 header 부분을 fixed 가 아닌 sticky 로 고정

특히 두 번째 케이스의 경우 fixed 와는 다르게 원래 그 곳에 위치한 요소인 것 처럼 기본적으로 요소가 차지하고 있는 공간을 할당하기 때문에 요소를 고정 시킬 때 훨씬 쉽게 레이아웃을 짤 수 있습니다.

끝.