CSS와 JavaScript로 스크롤 시 내비게이션 바 크기 조절하기

웹 페이지를 아래로 스크롤할 때 내비게이션 바(탐색 메뉴)가 부드럽게 줄어들고, 다시 맨 위로 올리면 원래 크기로 돌아오는 효과는 수많은 현대 웹사이트에서 활용되는 대표적인 UI 인터랙션입니다. 이 글에서는 CSS와 JavaScript만으로 이 기능을 구현하는 방법을 살펴보겠습니다.

작동 원리

핵심 원리는 간단합니다. JavaScript의 window.onscroll 이벤트로 사용자의 스크롤 위치를 실시간으로 감지하고, 스크롤이 일정 값(예: 20px)을 초과하면 내비게이션 바의 패딩과 로고 폰트 크기를 줄여 전체 높이를 축소합니다. 반대로 스크롤이 맨 위에 있으면 원래 크기를 복원합니다. 여기에 CSS transition 속성을 더하면 크기 변화가 부드러운 애니메이션으로 자연스럽게 표현됩니다.

전체 예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    margin: 0px;
    margin-top: 60px;
    padding: 0px;
}
nav {
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: rgb(39, 39, 39);
    overflow: auto;
    height: auto;
    transition: 0.5s;
    padding: 50px 10px;
}
.links {
    display: inline-block;
    text-align: center;
    padding: 14px;
    color: rgb(178, 137, 253);
    text-decoration: none;
    font-size: 17px;
}
.links:hover {
    background-color: rgb(100, 100, 100);
}
.selected {
    background-color: rgb(0, 18, 43);
}
.sample-content {
    height: 150vh;
}
.company-logo {
    font-size: 50px;
    color: white;
    position: absolute;
    right: 30px;
    transition: 0.3s;
}
</style>
</head>
<body>
<nav>
<a class="company-logo">&euro;</a>
<a class="links selected" href="#">Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
<div class="sample-content">
<h1>Here are some headers</h1>
<h2>Here are some headers</h2>
<h3>Here are some headers</h3>
<h4>Here are some headers</h4>
<h1>Here are some headers</h1>
<h2>Here are some headers</h2>
<h3>Here are some headers</h3>
<h4>Here are some headers</h4>
</div>
<script>
window.onscroll = scrollShowNav;
function scrollShowNav() {
    if (
        document.body.scrollTop > 20 ||
        document.documentElement.scrollTop > 20
    )
    {
        document.getElementsByTagName("nav")[0].style.padding = "10px 10px";
        document.querySelector(".company-logo").style.fontSize = "20px";
    } else {
        document.getElementsByTagName("nav")[0].style.padding = "40px 50px";
        document.querySelector(".company-logo").style.fontSize = "50px";
    }
}
</script>
</body>
</html>

코드 핵심 포인트

position: fixed: 내비게이션 바를 화면 상단에 고정해 스크롤과 무관하게 항상 보이도록 만듭니다.
transition 속성: nav에는 transition: 0.5s, 로고에는 transition: 0.3s를 적용해 크기 변화가 갑작스럽지 않고 부드럽게 이루어지도록 합니다.
스크롤 위치 감지: document.body.scrollTop과 document.documentElement.scrollTop 두 값을 함께 확인하는데, 이는 브라우저마다 스크롤 위치를 참조하는 방식이 다르기 때문입니다.
동적 스타일 변경: 스크롤이 20px을 넘으면 nav의 패딩을 10px 10px로, 로고 폰트를 20px로 줄이고, 그렇지 않으면 각각 40px 50px과 50px로 되돌립니다.

실행 결과

위 코드를 실행하면 초기 상태에서는 패딩이 넉넉한 내비게이션 바가 화면 상단에 표시됩니다.

CSS와 JavaScript로 스크롤 시 내비게이션 바 크기 조절하기

페이지를 아래로 스크롤하면 내비게이션 바가 다음과 같이 컴팩트하게 축소됩니다.

CSS와 JavaScript로 스크롤 시 내비게이션 바 크기 조절하기

마무리

이처럼 몇 줄의 JavaScript와 CSS만으로도 스크롤에 반응하는 동적 내비게이션 바를 손쉽게 구현할 수 있습니다. 임계값(20px), 패딩 크기, transition 시간 등을 조절하면 사이트 성격에 맞게 다양하게 응용할 수 있으니 직접 값을 바꿔가며 실험해 보시기 바랍니다.