프로그레스바 시작 위치 변경

프로그레스바 시작 위치 변경

QA

프로그레스바 시작 위치 변경

본문

3552882762_1667116681.693.jpg

 

 

구글 검색해서 프로그레스바를 만들었는데 바의 진행을 페이지의 젤 위가 아닌 스크롤 해서 내리다 특정 위치(div)에서 시작하고 끝내는 위치도 마찬가지로 젤 밑이 아닌 특정위치에서 끝내고 싶어요..!

자바스크립트를 잘 몰라 어렵네요

 

도와주시면 감사하겠습니다ㅠㅠㅠ

 

 

 


window.onscroll = function() {myFunction()};
    
function myFunction() {
  var winScroll = document.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
} 
 

이 질문에 댓글 쓰기 :

답변 1



window.onscroll = function() {myFunction()};
    
function myFunction() {
  var winScroll = document.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; // 스크롤한 높이 %
  document.getElementById("myBar").style.width = scrolled + "%"; // #myBar 폭 % = 크롤한 높이 %
} 


 

위의 자바스크립트는 스크롤바의 넓이를 생성하는 코딩 입니다.

스크롤바의 위치는 아래의 #myBar 의 위치를 변경하면 될것입니다.

맨위에 놓고 position:fixed; top:0px; 스타일 설정하면 맨위에 놓일 것입니다.

색상도 조절할 수 있고 도께도 조절할 수 있고 원하는데로 조정이 가능 합니다.

<div id="myBar" class="">    
 </div>

응용은 개발자의 몫입니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT