개발 웹 개발
D
dev_to
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

스크롤 기반 네비게이션 프로그레스 바 구현 방법

카테고리

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

서브카테고리

웹 개발

대상자

  • 웹 개발자 (중급 이상, CSS/JavaScript 기초 지식 보유자)
  • 사용자 경험(UX) 개선을 위한 인터랙티브 요소 구현 필요자

핵심 요약

  • scrollTop, scrollHeight, clientHeight를 이용해 스크롤 진행률 계산
  • .progress-bar의 width를 scrollPercentage 값으로 실시간 업데이트
  • transition 속성을 통해 부드러운 애니메이션 효과 적용

섹션별 세부 요약

1. CSS 스타일 적용

  • .progress-bar

- position: fixed로 상단 고정

- width: 0% 초기값 설정

- transition: width 0.25s ease-out 애니메이션 적용

  • .content

- padding: 20px으로 콘텐츠 여백 설정

2. JavaScript 로직 구현

  • window.addEventListener("scroll") 이벤트 핸들러

- scrollTop: 현재 스크롤 위치

- scrollHeight: 전체 스크롤 가능한 높이

- clientHeight: 화면 높이

- scrollPercentage: (scrollTop / scrollHeight) * 100 계산

3. 동작 원리

  • scrollPercentage 값을 .progress-bar의 width에 할당
  • 사용자가 스크롤할 때마다 실시간으로 진행률 표시
  • 시각적 피드백을 통해 사용자에게 콘텐츠 진행 상황 알림

결론

  • transition 속성과 scrollPercentage 계산식을 결합해 부드러운 프로그레스 바 효과 구현
  • 장거리 스크롤 페이지에서 사용자 경험 향상에 유용한 기법
  • position: fixed와 z-index: 9999 설정으로 UI 위에 항상 표시 가능
주요 키워드 5-7개". So 5-7. Let me choose the top 7: scroll-based navigation progress bar JavaScript CSS scrollPercentage scrollTop scrollHeight. That's seven. Maybe exclude clientHeight and React if they are less critical. But the user's original keywords include them. Hmm. Alternatively include React as it's a framework that might be relevant. But the summary doesn't mention React specifically. Maybe the article is not React-specific. The user might have included React as a keyword because it's part of the target audience's interests. So perhaps include it. So the keywords would be: scroll-based navigation progress bar JavaScript CSS React scrollPercentage scrollTop. That's seven. ClientHeight can be excluded if needed. Alternatively include scrollHeight and clientHeight. Let me see. The original keywords list includes scrollTop scrollHeight clientHeight. So maybe include those. Let's count: scroll-based navigation progress bar JavaScript CSS scrollPercentage scrollTop scrollHeight clientHeight. That's eight. Need to cut down to seven. Maybe remove clientHeight. So the final SEO keywords would be scroll-based navigation progress bar JavaScript CSS scrollPercentage scrollTop scrollHeight.
목록으로 원문 보기