스크롤 프로그래스바 구현~아! 정말 쉽구현!

아는 것과 실행하는 것은 다르다.

정말 아는 것이 많아도, 실행 할 시간이나 노력이 없으면, 구현하지 못한다.

스크롤 프로그래스바...

그거다, 웹페이지를 내리면, 스크롤 되는거....

CSS Progress Bars | CSS-Tricks - CSS-Tricks

CSS Progress Bars | CSS-Tricks

Just a fun experiment creating progress bars made with just CSS3 (no images). Loads of progressive nerdery packed into one little element.

css-tricks.com

이거 참조 해도 되고,

How To Create a Scroll Indicator (w3schools.com)

How To Create a Scroll Indicator

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

이것을 참조해도 된다...

예시?

원리는 간단하다.

span 태그를 스크롤 위치 만큼 색깔로 채우면 된다.

뭔 소리야...

아, 걍 코드로 이야기 하자.

.meter {
  position: fixed;
  bottom:0px;
width: 300px;
height: 350px;
z-index:99;
  right:0px;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  transition: all 0.3s ease;
}
.meter > span {
  display: block;
  width: 100%;
  background-color: #800000;
  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

이것만 있으면 된다.

span을 div 아래 종속 시키고, 실시간으로 width나 height를 바꿀 수 있는 자바만 넣어주면 끝~
웹투니 (tistory.com)

웹투니

각 종 웹툰이나 만화에 대한 간단한 후기를 작성합니다.

satanzero.tistory.com

요것은 구현 한 사이트!

요 밑의 스크립트는 새로고침 되었을 때만 반영되고 스크롤 바와 관계가 없다.

세상 사 뭐든지 응용하는 거지 뭐~
window.onscroll = function() {myFunction()};

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