CSS sticky 요소의 고정 상태 감지하기 – Intersection Observer 활용법

웹 페이지를 스크롤할 때 내비게이션 바나 특정 요소가 화면 상단에 고정(position: sticky)되는 순간을 감지해야 하는 경우가 종종 있습니다. 예를 들어, 요소가 고정되는 순간 그림자를 추가하거나 글꼴 크기를 줄여 시각적인 피드백을 주고 싶을 수 있습니다.

이럴 때 Intersection Observer API를 사용하면 스크롤 이벤트 리스너 없이도 성능 저하 없이 손쉽게 고정 상태를 감지할 수 있습니다.

동작 원리

핵심 아이디어는 간단합니다. sticky 요소 바로 위에 얇은 감시용(sentinel) 요소를 배치하고, 이 요소가 뷰포트와 교차하는 비율(intersectionRatio)을 관찰합니다.

감시용 요소가 화면에서 완전히 사라지면(intersectionRatio === 0) → sticky 요소가 고정된 상태입니다.
감시용 요소가 다시 완전히 보이면(intersectionRatio === 1) → sticky 요소가 원래 위치로 돌아온 상태입니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<style>
#first {
    background-color: lightgrey;
    height: 10px;
}
#navbar-top {
    background-color: lightgrey;
    height: 2px;
}
#container {
    position: sticky;
    top: 0;
    box-shadow: inset 0 0 25px navy;
    height: 55px;
    text-align: center;
    font-size: 24px;
    line-height: 55px;
    font-weight: bold;
    transition: font-size 0.4s ease-in;
}
.sticky-navbar {
    box-shadow: inset 0 0 15px orange!important;
    font-size: 20px !important;
}
#parent-container {
    background-color: aliceblue;
    height: 3300px;
}
</style>
</head>
<body>
<div id="first"></div>
<div id="navbar-top"></div>
<div id="container">Watch Me!</div>
<div id="parent-container"></div>
<script>
let newObserver = new IntersectionObserver(function(entries) {
    if(entries[0].intersectionRatio === 0)
        document.querySelector("#container").classList.add("sticky-navbar");
    else if(entries[0].intersectionRatio === 1)
        document.querySelector("#container").classList.remove("sticky-navbar");
}, { threshold: [0,1] });
newObserver.observe(document.querySelector("#navbar-top"));
</script>
</body>
</html>

코드 설명

위 예제의 주요 부분을 살펴보겠습니다.

#container는 position: sticky와 top: 0이 적용된 요소로, 스크롤 시 화면 상단에 고정됩니다.
#navbar-top은 높이가 2px에 불과한 감시용 요소로, sticky 요소가 고정되기 전 위치를 표시합니다.
.sticky-navbar 클래스는 고정 상태일 때 적용되는 스타일로, 주황색 그림자와 작은 글꼴 크기를 지정합니다.
IntersectionObserver는 threshold: [0, 1] 옵션으로 생성되어, 교차 비율이 0 또는 1이 되는 순간마다 콜백 함수가 실행됩니다.

실행 결과

페이지를 아래로 스크롤하면 "Watch Me!" 요소가 화면 상단에 고정되면서 주황색 그림자가 나타나고 글꼴 크기가 부드럽게 줄어듭니다. 다시 위로 스크롤하여 원래 위치로 돌아오면 스타일이 해제됩니다.

CSS sticky 요소의 고정 상태 감지하기 – Intersection Observer 활용법

마무리

이처럼 Intersection Observer를 활용하면 스크롤 이벤트를 직접 처리하지 않고도 sticky 요소의 고정 여부를 정확하게 감지할 수 있습니다. 이 기법은 고정 헤더 축소 효과, 스크롤 진행 표시기 등 다양한 UI 인터랙션에 응용할 수 있으며, 브라우저 최적화 덕분에 성능 면에서도 매우 유리합니다.