웹 페이지에서 스크롤을 내릴 때 상단에 숨겨져 있던 내비게이션 바(navbar)가 부드럽게 나타나도록 구현하면 사용자 경험을 크게 향상시킬 수 있습니다. 이 기능은 CSS의 position: fixed 속성과 transition 효과, 그리고 JavaScript의 onscroll 이벤트만으로 간단하게 만들 수 있습니다.
핵심 동작 원리
구현 방식은 다음과 같습니다.
- CSS: 내비게이션 바를 화면 상단에 고정(fixed)하되, 초기 위치를
top: -50px로 설정해 화면 밖으로 숨겨둡니다.transition속성을 적용해 위치 변화가 부드럽게 애니메이션되도록 합니다. - JavaScript:
window.onscroll이벤트를 감지하여 스크롤 위치가 일정 값(예: 20px)보다 크면 내비게이션 바의top값을0으로 변경해 아래로 슬라이드되게 하고, 스크롤이 맨 위로 올라가면 다시-50px로 되돌려 숨깁니다.
전체 예제 코드
다음은 CSS와 JavaScript를 사용해 스크롤 시 내비게이션 바가 아래로 슬라이드되는 완전한 예제입니다.
<!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>
body{
margin:0px;
margin-top:60px;
padding: 0px;
}
nav{
position: fixed;
top: -50px;
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
transition: 0.5s;
}
.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;
}
</style>
</head>
<body>
<nav>
<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.top = "0";
} else {
document.getElementsByTagName("nav")[0].style.top = "-50px";
}
}
</script>
</body>
</html>
코드 주요 포인트 살펴보기
1. 내비게이션 바 스타일링
nav 요소에 position: fixed를 지정해 뷰포트 기준으로 고정하고, top: -50px로 설정해 처음에는 화면 위쪽 바깥에 위치시킵니다. 여기에 transition: 0.5s를 추가하면 top 값이 변경될 때 0.5초에 걸쳐 부드럽게 움직이는 슬라이드 효과가 생깁니다.
2. 스크롤 이벤트 처리
window.onscroll 이벤트 핸들러인 scrollShowNav() 함수는 document.body.scrollTop 또는 document.documentElement.scrollTop 값을 확인합니다. 두 속성을 함께 검사하는 이유는 브라우저마다 스크롤 위치를 참조하는 객체가 다르기 때문입니다. 스크롤이 20px 이상 내려가면 내비게이션 바의 top 값을 0으로 바꿔 화면 안으로 끌어내리고, 그렇지 않으면 다시 -50px로 숨깁니다.
3. 스크롤 테스트용 콘텐츠
.sample-content 클래스에 height: 150vh를 지정해 실제 스크롤이 발생할 수 있도록 페이지 높이를 확보했습니다.
실행 결과
위 코드를 실행하면 페이지 로드 직후에는 내비게이션 바가 화면 상단 바깥에 숨겨져 보이지 않습니다.
페이지를 아래로 스크롤하면 내비게이션 바가 상단에서 부드럽게 아래로 슬라이드되며 나타납니다.
다시 페이지 최상단으로 스크롤을 올리면 내비게이션 바가 위로 사라지며 원래 상태로 돌아갑니다.
마무리
이처럼 CSS의 전환(transition) 효과와 JavaScript의 스크롤 이벤트를 조합하면 별도의 라이브러리 없이도 자연스러운 내비게이션 바 등장 애니메이션을 구현할 수 있습니다. 필요에 따라 슬라이드 속도를 조절하거나(transition 값 변경), 스크롤 감지 기준점을 조정해(scrollTop 비교값 변경) 원하는 UX로 손쉽게 커스터마이징할 수 있습니다.