웹 페이지를 아래로 스크롤할 때 상단에 고정된 내비게이션 메뉴가 자동으로 숨겨지고, 다시 위로 스크롤하면 나타나도록 구현하면 콘텐츠를 더 넓은 화면으로 볼 수 있어 사용자 경험이 크게 향상됩니다. 이 기능은 CSS의 transition 속성과 JavaScript의 스크롤 이벤트만으로 간단하게 만들 수 있습니다.
동작 원리
- 내비게이션 바에
position: fixed;를 적용해 항상 화면 상단에 고정합니다. window.onscroll이벤트로 현재 스크롤 위치를 실시간으로 감지합니다.- 스크롤 위치가 20px보다 크면 내비게이션 바의
top값을-50px로 변경해 화면 위쪽으로 밀어냅니다. - 스크롤이 맨 위 근처로 돌아오면
top값을0px로 되돌려 메뉴를 다시 표시합니다. - CSS의
transition: 0.5s;설정 덕분에 메뉴가 사라지고 나타날 때 부드러운 애니메이션 효과가 적용됩니다.
전체 예제 코드
<!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: 0px;
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 = "-50px";
} else {
document.getElementsByTagName("nav")[0].style.top = "0px";
}
}
</script>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 초기 화면이 출력됩니다.
페이지를 아래로 스크롤하면 내비게이션 바가 위쪽으로 부드럽게 사라지는 것을 확인할 수 있습니다.
