스크롤 내리면 나타나는 고정형 상단 메뉴 만들기 (Sticky Header)

웹사이트를 만들다 보면 방문자가 스크롤을 내릴 때도 메뉴를 쉽게 볼 수 있도록 고정된 상단 메뉴를 만들고 싶을 때가 있죠.

오늘은 CSS와 JavaScript를 활용해 'Sticky Header'를 만드는 방법을 쉽게 알려드릴게요!

 

📌 Sticky Header란?

Sticky Header는 스크롤을 내릴 때 화면 상단에 고정되어 따라오는 메뉴 영역을 말합니다. 사용자가 언제든 메뉴를 눌러 이동할 수 있어 UX에도 좋고 체류시간 증가에도 도움이 됩니다.

 

📌 Sticky Header 구현 방법

1️⃣ HTML 구조

<header id="header">
  <h2>내 사이트 메뉴</h2>
  <nav>
    <a href="#">홈</a>
    <a href="#">소개</a>
    <a href="#">문의</a>
  </nav>
</header>

2️⃣ CSS 스타일

#header {
  width: 100%;
  background: #333;
  color: #fff;
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  transition: all 0.3s;
}

#header nav a {
  color: #fff;
  margin: 0 10px;
  text-decoration: none;
}

body {
  margin: 0;
  padding-top: 80px;
  height: 3000px; /* 테스트를 위해 body의 세로 공간 확보 */
}

포인트: position: fixed;와 top: 0;을 설정해 화면 상단에 고정시키고, body의 padding-top으로 메뉴 영역만큼 여백을 확보합니다.

3️⃣ 스크롤 이벤트 추가 (선택)

<script>
window.addEventListener('scroll', function() {
  const header = document.getElementById('header');
  if (window.scrollY > 50) {
    header.style.background = '#111';
  } else {
    header.style.background = '#333';
  }
});
</script>

스크롤 위치에 따라 상단 메뉴의 배경 색상이 변하게 설정할 수도 있어요.

📌 마무리

이렇게 간단하게 고정형 상단 메뉴 (Sticky Header)를 구현할 수 있습니다. UX를 개선하고 방문자 체류시간을 늘려 사용자 경험에 긍정적인 영향을 줄 수 있으니, 꼭 활용해보세요!

💡 추가 팁

• CodePen에 위 코드를 적용해 실시간 테스트해볼 수 있어요!
• 반응형 메뉴로 확장하고 싶다면 @media 쿼리도 함께 활용해보세요.