CSS position: sticky로 스크롤 시 고정되는 요소 만드는 방법

CSS 고정(sticky) 요소란?

CSS의 position: sticky 속성을 사용하면 페이지를 스크롤할 때 특정 지점까지는 일반적인 흐름을 따르다가, 지정된 위치에 도달하면 화면에 고정되는 요소를 만들 수 있습니다. 주로 내비게이션 바나 헤더를 구현할 때 많이 활용됩니다.

sticky 요소를 만들려면 반드시 top, bottom, left, right 중 하나 이상의 값을 함께 지정해야 한다는 점을 기억하세요.

예제 코드

다음은 CSS로 고정(sticky) 요소를 만드는 전체 예제입니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        margin: 0px;
        padding: 0px;
        height: 150vh; /* 스크롤바 생성용 */
    }
    div.sticky {
        position: sticky;
        top: 0;
        background-color: rgb(52, 21, 110);
        color: white;
        padding: 50px;
        font-size: 20px;
    }
</style>
</head>
<body>
<h1>Sticky Element Example</h1>
<h2>Random Header Text</h2>
<h2>Random Header Text</h2>
<div class="sticky">Sticky Element</div>
<p style="font-size: 35px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vel dolore delectus
esse consequatur at nulla, consequuntur sint quas ea. Incidunt, ex. Consequatur 
ipsa earum veritatis fugiat iusto, doloremque sunt beatae quaerat laboriosam nemo 
soluta quidem porro quia. Dolore reprehenderit cum voluptatibus eius assumenda
ipsam tenetur asperiores magni aliquid eligendi doloribus quidem ipsa et praesentium 
provident molestias quaerat laboriosam, veniam aspernatur repellendus. Debitis sapiente, 
odit iste voluptatibus nesciunt veritatis incidunt mollitia nostrum, vitae suscipit iusto 
molestias consequuntur rem facere perspiciatis ad! Ratione reiciendis asperiores aperiam 
vitae facilis accusantium non aliquid, facere cupiditate reprehenderit tempore veritatis 
eum accusamus omnis tempora quos!</p>
</body>
</html>

코드 설명

height: 150vh — body의 높이를 뷰포트보다 크게 설정하여 스크롤바가 나타나도록 합니다.
position: sticky — 요소를 sticky 위치로 지정합니다.
top: 0 — 스크롤 시 요소가 뷰포트 최상단에 도달하면 그 자리에 고정됩니다.

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

CSS position: sticky로 스크롤 시 고정되는 요소 만드는 방법

페이지를 조금 아래로 스크롤하면 해당 요소가 화면 상단에 고정되어 계속 표시되는 것을 확인할 수 있습니다.

CSS position: sticky로 스크롤 시 고정되는 요소 만드는 방법

참고 사항

sticky 속성은 대부분의 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 지원됩니다. 단, 부모 요소에 overflow: hidden이 설정되어 있으면 sticky 동작이 정상적으로 작동하지 않을 수 있으니 주의하세요.