프로그레스바 시작 위치 변경
본문
구글 검색해서 프로그레스바를 만들었는데 바의 진행을 페이지의 젤 위가 아닌 스크롤 해서 내리다 특정 위치(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>
응용은 개발자의 몫입니다.
스크롤바 자체의 화면 위치가 아닌 프로그레스바가 채워지는 시작 지점을 변경하고 싶어요..!ㅠㅠ
네 제가 잘못 말씀 드렸네요....
스크롤바는 프로그레스바를 의미 합니다.
댓글이 달려서 수정이 안되네요 .. ㅜㅜ
답변을 작성하시기 전에 로그인 해주세요.
