CSS의 position: sticky; 속성을 사용하면 스크롤 위치를 기준으로 요소의 위치를 지정할 수 있습니다. 사용자가 페이지를 아래로 스크롤할 때 특정 요소가 화면 상단에 고정되어 따라오도록 만들 수 있어, 내비게이션 바나 섹션 제목을 고정하는 데 자주 활용됩니다.
sticky 동작 원리
sticky는 relative와 fixed의 중간 성격을 가진 속성입니다. 일반적인 문서 흐름 안에서는 relative처럼 동작하지만, 스크롤이 지정된 임계점(top, bottom 등)에 도달하면 fixed처럼 화면에 고정됩니다.
주의할 점은 top, bottom, left, right 값 중 최소 하나를 반드시 지정해야 한다는 것입니다. 값을 지정하지 않으면 sticky 효과가 작동하지 않습니다. 또한 구형 Safari 브라우저와의 호환성을 위해 -webkit-sticky 접두사를 함께 작성하는 것이 좋습니다.
예제
아래 코드를 실행하면 CSS position: sticky가 실제로 어떻게 동작하는지 직접 확인할 수 있습니다. 페이지를 아래로 스크롤하면 주황색 박스가 화면 상단에 고정되는 것을 볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 10px;
background-color: orange;
border: 1px solid blue;
}
</style>
</head>
<body>
<p>Scroll and see the effect!</p>
<div class = "sticky">Sticky!</div>
<div style = "padding-bottom:2000px">
<p>This is demo text.</p>
<p>Scroll down to view the sticky div.</p>
</div>
</body>
</html>
핵심 포인트 정리
- top: 0; – 스크롤 시 요소가 화면 최상단에 고정되도록 설정합니다.
- padding과 배경색 – 고정된 요소가 뒤쪽 콘텐츠와 겹쳐 보일 수 있으므로 배경색을 지정하는 것이 좋습니다.
- 브라우저 호환성 – Chrome, Firefox, Edge 등 대부분의 모던 브라우저에서 지원되며, 구형 Safari는
-webkit-접두사가 필요합니다.
이처럼 position: sticky는 JavaScript 없이 순수 CSS만으로 스티키 헤더나 고정 사이드바를 손쉽게 구현할 수 있는 강력하고 유용한 속성입니다.