웹 페이지에서 스크롤을 내릴 때 헤더가 자연스럽게 작아지는 효과는 사용자 경험을 개선하는 대표적인 UI 기법입니다. CSS의 transition 속성과 JavaScript의 스크롤 이벤트를 함께 활용하면 손쉽게 구현할 수 있습니다. 아래 예제 코드를 통해 자세히 알아보겠습니다.
전체 예제 코드
<!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;
}
.header {
position: fixed;
top: 0;
width: 100%;
background-color: rgb(52, 21, 110);
color: white;
padding: 50px;
font-size: 40px;
transition: 0.8s;
}
</style>
</head>
<body>
<div class="header">Header Text</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>
<script>
window.onscroll = function() {resizeHeader()};
function resizeHeader() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.querySelector(".header").style.fontSize = "20px";
} else {
document.querySelector(".header").style.fontSize = "40px";
}
}
</script>
</body>
</html>코드 설명
이 코드가 동작하는 원리를 단계별로 살펴보겠습니다.
1. 고정 헤더 스타일링 (CSS)
.header 클래스에 position: fixed;를 적용해 헤더가 항상 화면 상단에 고정되도록 설정합니다. 핵심은 transition: 0.8s; 속성으로, 폰트 크기가 변경될 때 갑자기 바뀌지 않고 0.8초에 걸쳐 부드럽게 애니메이션 처리됩니다.
2. 스크롤 이벤트 감지 (JavaScript)
window.onscroll 이벤트 핸들러를 등록하여 사용자가 스크롤할 때마다 resizeHeader() 함수가 호출됩니다. 함수 내부에서는 document.body.scrollTop 또는 document.documentElement.scrollTop 값을 확인합니다.
3. 조건 분기 처리
스크롤 위치가 50픽셀을 초과하면 헤더의 폰트 크기를 20px로 축소하고, 다시 맨 위로 올라가면 원래 크기인 40px로 복원합니다. 두 브라우저 속성을 OR(||) 조건으로 함께 검사하는 이유는 브라우저 간 호환성을 보장하기 위함입니다.
실행 결과
위 코드를 실행하면 초기 상태에서는 큰 폰트 크기(40px)의 보라색 헤더가 화면 상단에 표시됩니다.
페이지를 아래로 조금만 스크롤하면 헤더의 폰트 크기가 부드럽게 줄어들어(20px) 더 많은 콘텐츠 영역을 확보할 수 있습니다.
마무리
이 기법은 응용 범위가 넓습니다. 폰트 크기뿐만 아니라 padding, 배경색, 그림자 효과 등을 함께 변경하면 더욱 세련된 내비게이션 바를 만들 수 있습니다. 또한 최신 프로젝트에서는 window.onscroll 대신 addEventListener('scroll', ...) 방식을 사용하고, 성능 최적화를 위해 스로틀(throttle) 기법을 적용하는 것도 좋은 방법입니다.