프로그레스바 시작 위치 변경
구글 검색해서 프로그레스바를 만들었는데 바의 진행을 페이지의 젤 위가 아닌 스크롤 해서 내리다 특정 위치(div)에서 시작하고 끝내는 위치도 마찬가지로 젤 밑이 아닌 특정위치에서 끝내고 싶어요..!
자바스크립트를 잘 몰라 어렵네요
도와주시면 감사하겠습니다ㅠㅠㅠ
</p>
<p>window.onscroll = function() {myFunction()};
function myFunction() {</p>
<p> 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 + "%";
} </p>
<p> </p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
3년 전
</p>
<pre>
<code>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 폭 % = 크롤한 높이 %
}
</code></pre>
<p>
위의 자바스크립트는 스크롤바의 넓이를 생성하는 코딩 입니다.
스크롤바의 위치는 아래의 #myBar 의 위치를 변경하면 될것입니다.
맨위에 놓고 position:fixed; top:0px; 스타일 설정하면 맨위에 놓일 것입니다.
색상도 조절할 수 있고 도께도 조절할 수 있고 원하는데로 조정이 가능 합니다.
응용은 개발자의 몫입니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
3년 전
네 제가 잘못 말씀 드렸네요....
스크롤바는 프로그레스바를 의미 합니다.
댓글이 달려서 수정이 안되네요 .. ㅜㅜ
스크롤바는 프로그레스바를 의미 합니다.
댓글이 달려서 수정이 안되네요 .. ㅜㅜ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
채택
채택
답변대기
답변대기
채택
채택
채택
채택
채택
채택
채택
채택
답변대기
채택
답변대기
답변대기
채택
채택
답변대기
채택