잠시만 기다려 주세요

     '이태원 150명 넘게 죽은 핼러윈 참사.. 오세훈 탄핵.. 윤석열 탄핵.... 행안부 장관 이상민은 사람이냐... 말만 하면 책임 회피..'
전체검색 :  
이번주 로또 및 연금번호 발생!!   |  HOME   |  여기는?   |  바다물때표   |  알림 (19)  |  여러가지 팁 (1095)  |  추천 및 재미 (163)  |  자료실 (28)  |  
시사, 이슈, 칼럼, 평론, 비평 (795)  |  끄적거림 (142)  |  문예 창작 (719)  |  바람 따라 (75)  |  시나리오 (760)  |  드라마 대본 (248)  |  
살인!


    javascript/jquery

javascript/jquery - Progress Scroll Bar Example, 스크롤 진행바
이 름 : 바다아이   |   조회수 : 16790         짧은 주소 : 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
번 호 카테고리 제 목 이름 조회수
77 javascript/jquery .... 바다아이 346
76 javascript/jquery , . 바다아이 8268
75 javascript/jquery , . , 바다아이 6466
74 javascript/jquery javascript , ... 바다아이 8315
73 javascript/jquery , cookie class 바다아이 8936
72 javascript/jquery select 3 바다아이 9911
71 javascript/jquery , ... 바다아이 9168
70 javascript/jquery , timezone, , ... moment.js 바다아이 11894
69 javascript/jquery textarea cursor . focus, cursor ... 바다아이 11593
68 javascript/jquery (block) , ... 바다아이 9473
67 javascript/jquery textarea cursor , , focus 바다아이 13013
66 javascript/jquery jquery ajax option .... 바다아이 10016
65 javascript/jquery jquery open api , ajax JSONP cross domain , , error 0 ... sop 바다아이 9637
64 javascript/jquery javascript , , , , () 바다아이 10626
63 javascript/jquery javascript (date ) 바다아이 10769
62 javascript/jquery CSS3 javascript 바다아이 11457
61 javascript/jquery javascript , cookie, , , , , 바다아이 10530
60 javascript/jquery javascript 바다아이 11261
59 javascript/jquery javascript / , , , 바다아이 14870
58 javascript/jquery url , , encode, decode ... 바다아이 9706
57 javascript/jquery javascript ... frame location.href 바다아이 15385
56 javascript/jquery File Upload Progress, .... . 바다아이 10213
55 javascript/jquery javascript, json , json Highlight 바다아이 10202
54 javascript/jquery javascript json , , JSON.stringify, JSON.parse, 바다아이 11679
53 javascript/jquery javascript innerHTML, innerTEXT ... 바다아이 10209
52 javascript/jquery javascript entity , , encode, decode 바다아이 10525
51 javascript/jquery javascript post, get , 바다아이 12475
50 javascript/jquery text copy, , How to copy a TEXT to Clipboard on a Button-Click 바다아이 10581
49 javascript/jquery jquery autocomplete , , . 바다아이 10211
48 javascript/jquery javascript, jquery, , autocomplete 바다아이 11247
| |









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