🧲 스크롤 위치에 따라 고정되는 UI 만들기 – Sticky 요소 구현 완전 정복

 

 

 

스크롤을 내리면 메뉴나 헤더가 화면 상단에 고정되어 계속 보이는 경험,

다들 한 번쯤 해보셨죠?

 

이런 기능은 사용자 탐색 효율을 높이고,

상호작용 요소에 집중도를 높여주는 UI 기법 중 하나예요.

 

이번 글에서는 position: sticky 와 자바스크립트를 활용해

스크롤 위치에 따라 고정되는 요소(Sticky UI) 를 만드는 방법을 소개합니다.

 

🎯 구현 목표

• 특정 영역에서 스크롤 시 요소 고정
• 순수 CSS 또는 JS로 구현
• 반응형 웹에서도 유연하게 작동

 

✍️ 기본 CSS 방식 – position: sticky

 

가장 간단한 방식은 CSS의 position: sticky 속성을 사용하는 것입니다.

 

.sticky {
  position: sticky;
  top: 0; /* 화면 위에서 얼마나 떨어진 위치에 고정시킬지 지정 */
  background: white;
  z-index: 10;
}

 

✅ HTML 구조 예시

 

<header class="sticky">
  <nav>내비게이션 바</nav>
</header>
<section>본문 콘텐츠</section>

 

💡 이 방식은 요소가 부모 컨테이너의 영역 안에서만 고정되므로, 구조 설계가 중요합니다.

부모 요소가 overflow: hidden 이나 overflow: auto 인 경우 sticky가 제대로 동작하지 않을 수 있어요!

 

🧠 자바스크립트 방식 – 일정 위치에서 클래스 토글

 

CSS만으로 제어하기 어려운 경우엔 JS를 활용해 등장 시점이나 고정 여부를 보다 세밀하게 제어할 수 있어요.

 

const stickyTarget = document.querySelector('.sticky');
const stickyOffset = stickyTarget.offsetTop;

window.addEventListener('scroll', () => {
  if (window.scrollY > stickyOffset) {
    stickyTarget.classList.add('fixed');
  } else {
    stickyTarget.classList.remove('fixed');
  }
});

 

🎨 추가 CSS

 

.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

 

📌 이렇게 하면 스크롤 위치에 따라 클래스를 토글하면서 완전히 화면 상단에 고정되는 효과를 줄 수 있어요.

 

🚀 실무 적용 케이스

적용 상황	설명
제품 페이지 고정 구매 버튼	스크롤 시 계속 보이게 하여 전환율을 높임
문서 콘텐츠 고정 목차	긴 글에서 섹션 이동을 쉽게 만들어줌
게시글 작성창 상단 고정 툴바	사용자가 스크롤을 내릴 때도 툴바를 항상 접근 가능하게

 

🔧 확장 기능 제안

• 고정 해제 구간 설정: 특정 섹션 지나면 다시 고정 해제되는 기능
• 모바일/PC 환경별 고정 방식 조절
• Sticky 요소 내부 애니메이션 추가 (예: 글자 색 변경, 확대 효과 등)
• Intersection Observer로 고정 타이밍 감지 개선

 

📌 마무리 팁

• position: sticky는 레이아웃이 단순할 때 강력한 도구지만, 동적 UI에는 JS가 더 유연해요.
• 브라우저 호환성과 고정 대상의 z-index, 부모 요소의 overflow 속성도 반드시 확인하세요.
• 고정 요소가 너무 많으면 오히려 UX를 해칠 수 있으니 핵심 요소에만 적용하세요.