CSS의 position: sticky 속성은 웹페이지에서 스크롤 시 특정 요소를 고정할 수 있는 매우 유용한 기능입니다.
특히 사이드바나 내비게이션 메뉴처럼 항상 보여야 하는 영역에 적용하면 사용자 편의성을 높일 수 있습니다.
간단한 코드만으로도 유연한 레이아웃을 구현할 수 있어 많은 웹 개발자들이 선호하는 속성 중 하나입니다. 이 글에서는 position: sticky의 기본 개념부터 활용 예제까지 자세히 소개합니다.
예제 코드 및 예제 실행
블로그 또는 쇼핑몰에서 왼쪽은 메뉴 영역이고, 오른쪽은 방대한 양의 콘텐츠 영역일 경우 스크롤 시 왼쪽 메뉴 영역이 사라지면서, 메뉴를 보기 위해 다시 상단으로 다시 가야 하는 불편함이 있습니다. 이럴 때 CSS로 간단히 처리하는 예제입니다.
예제코드
<div style="display:flex; flex-direction:row; gap: 20px; width:100%;">
<div style="flex:1.5; position:relative">
<div style="border-radius:10px; background-color:#eee; padding:30px; position:sticky; top:50px;">
고정
</div>
</div>
<div style="flex:1.5">
<div style="border-radius:10px; background-color:#ddd; padding:30px; height:1024px;">
스크롤
</div>
</div>
</div>예제실행
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
자주 묻는 질문❓
position: fixed는 화면에 고정되어 스크롤해도 항상 같은 위치에 머무릅니다. 반면 position: sticky는 지정된 위치에 도달하기 전까지는 일반 흐름대로 움직이다가, 해당 위치에 도달하면 고정됩니다.
부모 요소에 overflow: hidden이나 overflow: scroll이 설정되어 있으면 sticky가 제대로 작동하지 않을 수 있습니다. 이 경우 부모 요소의 overflow 속성을 확인하고 수정해보세요.
사이드바, 내비게이션 메뉴, 테이블 헤더, 알림 배너 등 스크롤 중에도 사용자에게 계속 보여야 하는 요소에 적합합니다.
대부분의 최신 브라우저에서는 지원하지만, 오래된 버전의 IE(Internet Explorer)에서는 지원되지 않습니다. 크로스 브라우저 호환성을 고려해야 합니다.
마무리
위 예제처럼 CSS의 position: sticky 속성을 활용하면 웹페이지가 스크롤되더라도 왼쪽 메뉴 영역을 고정시킬 수 있어 사용자 경험을 크게 향상시킬 수 있습니다.
특히 position: sticky는 기존의 fixed나 absolute보다 더 유연하게 동작하며, 특정 위치에 도달했을 때만 고정되는 특성이 있어 다양한 레이아웃에 적용하기 좋습니다.
저처럼 사이드바나 내비게이션 메뉴를 고정하고 싶은 분들께는 position: sticky가 정말 유용한 도구가 될 거예요.
CSS는 점점 더 강력해지고 있고, 그 중에서도 position: sticky는 간단하면서도 강력한 기능을 제공해 정말 매력적인 속성이라고 느껴집니다. 앞으로도 다양한 UI 구성에 position: sticky를 적극 활용해보고 싶네요. CSS 너무 좋은 것 같습니다!
Summary in English
This post explains how to use the CSS position: sticky property to keep a sidebar or menu fixed while scrolling. Unlike fixed, position: sticky allows elements to remain in the normal flow until they reach a defined position, then stick in place. It’s a simple yet powerful way to enhance layout and user experience. Examples and tips are included to help you apply it effectively