스크롤 시 축소되는 스티키 헤더 구현 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발 초보자 및 프론트엔드 기초 학습자

핵심 요약

• HTML 구조로 헤더와 내비게이션 요소를 정의하고, CSS position: sticky로 스티키 효과 구현
• JavaScript scrollY 이벤트를 통해 스크롤 위치 감지 후 .shrink 클래스 동적으로 적용
• 반응형 디자인을 위한 패딩/폰트 크기 조정으로 모바일 최적화

섹션별 세부 요약

1. HTML 구조

• 태그 내 로고와 네비게이션 링크 배치
• id="header"로 스크립트에서 선택자 지정
• position: sticky 적용 시 top: 0으로 고정

2. CSS 스타일링

• 기본 상태: padding: 20px / font-size: 18px / background: white
• .shrink 클래스: padding: 10px / font-size: 16px / background: #f0f0f0
• transition: all 0.3s ease로 부드러운 전환 효과 적용

3. JavaScript 구현

• window.onscroll 이벤트 리스너 설정
• window.scrollY > 50 조건 시 .shrink 클래스 추가
• scrollY 값에 따라 헤더의 시각적 크기 및 배경색 동적으로 변경

결론

• 시작하기 쉬운 프로젝트로 HTML/CSS/JS 통합 학습 가능
• 반응형 디자인 및 사용자 경험 개선에 효과적
• position: sticky와 scrollY 이벤트 활용은 현대 웹 개발의 핵심 기술