I'm

Developer, Designer, Photographer

GET IN TOUCH

  • Buk-gu, Busan, Republic of Korea
  • ungdoli0916@naver.com
  • Kakao ID : Ungdoli
Your message has been sent. Thank you!
(즐거웅코드) 자바스크립트 스크롤 프로그레스바 구현하기

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 9. 22. 23:27

반응형

[즐거'웅'코드] 목차

  1. 예제 소스
  2. 구현 예시
예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<style>
    html {
        width: 100%;
        height: 100%;
    }
 
    body {
        margin: 0;
        padding: 0;
    }
 
    .header {
        position: fixed;
        top: 0;
        z-index: 1;
        width: 100%;
        background-color: #F1F1F1;
    }
 
    .progress-container {
        width: 100%;
        height: 8px;
        background: #CCCCCC;
    }
 
    .progress-container .progress-bar {
        width: 0;
        height: 8px;
        background: #4CAF50;
    }
 
    .content_obj {
        width: 100%;
        height: 5000px;
        background-color: #eeeeee;
    }
</style>
 
<div class="header">
    <div class="progress-container">
        <div class="progress-bar"></div>
    </div>
</div>
 
<div class="content_obj"></div>
 
<script>
    window.onscroll = function () {
        progressBar()
    };
 
    function progressBar() {
        var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
        var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        var scrolled = (winScroll / height) * 100;
        document.getElementsByClassName("progress-bar")[0].style.width = scrolled + "%";
    }
</script>
구현 예시
반응형
저작자표시

'· 즐거'웅' 코드 (Source) > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

(즐거웅코드) CSS 무한으로 두 번씩 깜빡이는 플래시(flash) 애니메이션  (0) 2021.09.24
(즐거웅코드) CSS background에 image랑 color 같이 넣기  (0) 2021.09.23
(즐거웅코드) 자바스크립트 단순한 progressbar 구현하기  (0) 2021.09.21
(즐거웅코드) 제이쿼리 스크롤 업/다운 방향 체크하기  (0) 2021.09.20
(즐거웅코드) CSS 상하로 뒤집히며 내용이 달라지는 플립박스 구현하기  (0) 2021.09.19

관련글

댓글 0

티스토리툴바