잠시만 기다려 주세요

HOME   |  여기는?   |  바다물때표   |  여러가지 팁 (888)  |  추천 및 재미 (152)  |  자료실 (20)  |  끄적거림 (519)  |  시나리오 (760)  |  드라마 대본 (248)  |  

2020년 09월 22일
당장은 죽을 것 같겠지만 사람 쉽게 죽지 않는다. 견디고 또 견디면 좋은 보상이 있으리라. - 바다아이
 

 

    javascript/jquery

javascript/jquery - Progress Scroll Bar Example, 스크롤 진행바
이 름 : 바다아이   |   조회수 : 3518         짧은 주소 : https://www.bada-ie.com/su/?861591902024
스크롤 내릴 때마다 상단에 문서 길이 대비 진행바가 생깁니다.
보시고 필요한 부분만 가져다 쓰시면 됩니다.


<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script>
    $(document).ready(function() {
      var docHeight = $(document).height(),
      windowHeight = $(window).height(),
      scrollPercent;

      $(window).scroll(function() {
        scrollPercent = $(window).scrollTop() / (docHeight - windowHeight) * 100;

        $('.scroll-progress').width(scrollPercent + '%');
        });
        });
</script>
<style>
.header-container {
  width: 100%;
  height: 60px;
  background-color: white;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
}

.header {
  padding-left: 10px;
}

h1 {
  margin-top: 15px;
}

.scroll-progress-container {
  width: 100%;
  height: 5px;
  background-color: white;
  top: 55px;
  position: absolute;
}

.scroll-progress {
  width: 0px;
  height: 5px;
  background-color: purple;
}

.filler-text {
  width: 60%;
  margin-top: 80px;
  margin-left: 50px;
  position: absolute;
}
</style>
</head>
<body>
<div class="header-container">
<div class="header">
<h1>Progress Scroll Bar Example</h1>
</div>
<div class="scroll-progress-container">
<div class="scroll-progress"></div>
</div>
</div>

<pre>
아무거나 아주 긴 내용 붙여 넣으세요....
</pre>

<p class="filler-text">
The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water...
</p>

</body>
</html>


출처 : https://www.sourceclear.com/blog/scroll-progress/
 
| |


      1 page / 3 page
번 호 카테고리 제 목 이름 조회수
74 javascript/jquery javascript 서버시간 가져오기, 서버날짜 가져오기... 바다아이 253
73 javascript/jquery 자바스크립트 쿠키 클래스, cookie class 바다아이 807
72 javascript/jquery select 박스 3단 카테고리 바다아이 1200
71 javascript/jquery 자바스크립트 해당 년월의 마지막 날짜 구하기, 이번달 마지막 일 구하기... 바다아이 1740
70 javascript/jquery 자바스크립트 타임존 변환, timezone, 날짜, 시간 관련 편하게 작업하기... moment.js 바다아이 1870
69 javascript/jquery textarea 의 특정 커서 cursor 위치에 문자 삽입하기. focus, 커서 cursor 위치 구하기... 바다아이 1796
68 javascript/jquery 마우스 블럭(block) 선택한 텍스트 가져오기, 마우스로 웹페이지 본문 선택한 문자만큼 가져오기... 바다아이 1737
67 javascript/jquery textarea 특정 위치에 커서 cursor 를 옮기기, 위치시키기, focus 바다아이 2344
66 javascript/jquery jquery ajax option 옵션 총 정리.... 바다아이 1955
65 javascript/jquery jquery open api 개발, ajax JSONP cross domain 문제, 서로 다른 도메인 문제 해결하기, error 0 문제... sop 문제 바다아이 2009
64 javascript/jquery javascript 자바스크립트 소수점, 자리수, 반올림, 올림, 내림(버림) 바다아이 2102
63 javascript/jquery javascript 현재시각 표시하는 디지털 시계 만들기 (date 객체) 바다아이 2194
62 javascript/jquery CSS3 회전 속성과 javascript를 활용한 아날로그 시계 바다아이 2369
61 javascript/jquery javascript 자바스크립트 쿠키, cookie, 만들기, 저장, 삭제, 가져오기, 얻기 바다아이 2271
60 javascript/jquery javascript 자바스크립트 날짜 계산하는 다양한 방법 바다아이 2587
59 javascript/jquery 자바스크립트 javascript 한/영타 변환기, 한영, 한글, 영어 바다아이 2805
58 javascript/jquery url 인코드, 디코드, encode, decode 예제... 바다아이 2083
57 javascript/jquery javascript 자바스크립트 프레임 페이지 이동... frame location.href 바다아이 2191
56 javascript/jquery File Upload Progress, 파일 업로드 프로그레스바.... 업로드 진행바 구현. 바다아이 2538
55 javascript/jquery 자바스크립트 javascript, json 데이터 이쁘게 출력하기, json Highlight 바다아이 2542
54 javascript/jquery 자바스크립트 javascript json 사용하기, 출력하기, JSON.stringify, JSON.parse, 변환 바다아이 2640
53 javascript/jquery 자바스크립트 javascript innerHTML, innerTEXT 사용 할 때 주의할 점... 바다아이 2379
52 javascript/jquery 자바스크립트 javascript 엔티티 entity 인코딩, 디코딩, encode, decode 바다아이 2681
51 javascript/jquery 자바스크립트 javascript post, get 값 파라미터 받기, 구하기 바다아이 3880
50 javascript/jquery 자바스크립트 text copy, 복사, How to copy a TEXT to Clipboard on a Button-Click 바다아이 2758
49 javascript/jquery jquery autocomplete 자동완성 한글 입력시 문자, 검색어, 창 사라지는 문제. 바다아이 2516
48 javascript/jquery 자바스크립트 javascript, jquery, 검색어 자동완성 기능, autocomplete 바다아이 2850
47 javascript/jquery 자바스크립트 substring, substr, indexOf, lastIndexOf (javascript 문자열 자르기, 뒤에서 자르기, 찾기) 바다아이 2610
46 javascript/jquery Javascript 자바스크립트 event.keyCode 키보드 코드값, 이벤트 키코드, ACSII 코드 바다아이 2253
45 javascript/jquery 자바스크립트 url encode decode 하기, 인코딩, 디코딩, javascript 한글 깨짐 바다아이 3450
1
2
3
| |








Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ FreeBSD + GoLang + PostgreSQL ]
서버위치 : 구글 클라우드 플랫폼  실행시간 : 0.04724 초
to webmaster... gogo sea. gogo sea.