Skip to content

Commit bb9380f

Browse files
spemerspemer
committed
Update README.md
1 parent 105e6e0 commit bb9380f

File tree

4 files changed

+79
-72
lines changed

4 files changed

+79
-72
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,9 @@ Vue.use(VueScrollProgress)
5353
/* play with some lines below */
5454
#progress-container-el {
5555
/* background */
56-
background-color: #f4f4f4 !important;
56+
background-color: transparent !important;
57+
top: calc(100% - 4px) !important;
5758
}
58-
5959
#progress-el {
6060
/* progress bar */
6161
background-color: red !important;

‎docs/dist/build.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

Lines changed: 65 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,68 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<!--[if !mso]><!-- -->
8-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
9-
<!--<![endif]-->
10-
<title>vue-scroll-progress</title>
11-
<link href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css' rel='stylesheet' type='text/css'>
12-
<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
13-
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
14-
15-
<link rel="apple-touch-icon" sizes="57x57" href="./src/assets/favicon/apple-icon-57x57.png">
16-
<link rel="apple-touch-icon" sizes="60x60" href="./src/assets/favicon/apple-icon-60x60.png">
17-
<link rel="apple-touch-icon" sizes="72x72" href="./src/assets/favicon/apple-icon-72x72.png">
18-
<link rel="apple-touch-icon" sizes="76x76" href="./src/assets/favicon/apple-icon-76x76.png">
19-
<link rel="apple-touch-icon" sizes="114x114" href="./src/assets/favicon/apple-icon-114x114.png">
20-
<link rel="apple-touch-icon" sizes="120x120" href="./src/assets/favicon/apple-icon-120x120.png">
21-
<link rel="apple-touch-icon" sizes="144x144" href="./src/assets/favicon/apple-icon-144x144.png">
22-
<link rel="apple-touch-icon" sizes="152x152" href="./src/assets/favicon/apple-icon-152x152.png">
23-
<link rel="apple-touch-icon" sizes="180x180" href="./src/assets/favicon/apple-icon-180x180.png">
24-
<link rel="icon" type="image/png" sizes="192x192" href="./src/assets/favicon/android-icon-192x192.png">
25-
<link rel="icon" type="image/png" sizes="32x32" href="./src/assets/favicon/favicon-32x32.png">
26-
<link rel="icon" type="image/png" sizes="96x96" href="./src/assets/favicon/favicon-96x96.png">
27-
<link rel="icon" type="image/png" sizes="16x16" href="./src/assets/favicon/favicon-16x16.png">
28-
<link rel="manifest" href="./src/assets/favicon/manifest.json">
29-
<meta name="msapplication-TileColor" content="#ffffff">
30-
<meta name="msapplication-TileImage" content="./src/assets/favicon/ms-icon-144x144.png">
31-
<meta name="theme-color" content="#ffffff">
32-
33-
<meta name="robots" content="index, follow">
34-
<meta name="googlebot" content="index,follow">
35-
<meta name="description" content="vue-scroll-progress | Simple Vue.js plugin for page scroll progress bar">
36-
<meta name="keywords" content="Vue, Vue.js, Plugin, Library, Scroll, Progress, Material, Design, Spemer, Hyouk Seo, GitHub, NPM, JS, JavaScript, Web">
37-
38-
<meta property="og:title" content="vue-scroll-progress | Simple Vue.js plugin for page scroll progress bar">
39-
<meta property="og:description" content="vue-scroll-progress | Simple Vue.js plugin for page scroll progress bar">
40-
<meta property="og:image" content="./src/assets/metacard.png">
41-
<meta property="og:type" content="website">
42-
<meta property="og:url" content="https://spemer.github.io/vue-scroll-progress/">
43-
44-
<meta name="twitter:title" content="vue-scroll-progress | Simple Vue.js plugin for page scroll progress bar">
45-
<meta name="twitter:description" content="vue-scroll-progress | Simple Vue.js plugin for page scroll progress bar">
46-
<meta name="twitter:image:src" content="./src/assets/metacard.png">
47-
<meta name="twitter:image" content="./src/assets/metacard.png">
48-
<meta name="twitter:card" content="summary">
49-
<meta name="twitter:site" content="@officialspemer">
50-
<meta name="twitter:creator" content="@officialspemer">
51-
52-
<meta itemprop="description" content="vue-scroll-progress | Simple Vue.js plugin for page scroll progress bar">
53-
<meta itemprop="image" content="./src/assets/metacard.png">
54-
55-
<link rel="canonical" href="https://spemer.github.io/vue-scroll-progress/">
56-
</head>
57-
<body>
58-
<div id="app"></div>
59-
<noscript>You need to enable JavaScript to run this app.</noscript>
60-
<script src="https://spemer.github.io/vue-scroll-progress/dist/build.js"></script>
61-
<!-- <script src="/dist/build.js"></script> -->
62-
</body>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<!--[if !mso]><!-- -->
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
10+
<!--<![endif]-->
11+
<title>vue-scroll-progress</title>
12+
<link href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css' rel='stylesheet'
13+
type='text/css'>
14+
<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
15+
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
16+
17+
<link rel="apple-touch-icon" sizes="57x57" href="./src/assets/favicon/apple-icon-57x57.png">
18+
<link rel="apple-touch-icon" sizes="60x60" href="./src/assets/favicon/apple-icon-60x60.png">
19+
<link rel="apple-touch-icon" sizes="72x72" href="./src/assets/favicon/apple-icon-72x72.png">
20+
<link rel="apple-touch-icon" sizes="76x76" href="./src/assets/favicon/apple-icon-76x76.png">
21+
<link rel="apple-touch-icon" sizes="114x114" href="./src/assets/favicon/apple-icon-114x114.png">
22+
<link rel="apple-touch-icon" sizes="120x120" href="./src/assets/favicon/apple-icon-120x120.png">
23+
<link rel="apple-touch-icon" sizes="144x144" href="./src/assets/favicon/apple-icon-144x144.png">
24+
<link rel="apple-touch-icon" sizes="152x152" href="./src/assets/favicon/apple-icon-152x152.png">
25+
<link rel="apple-touch-icon" sizes="180x180" href="./src/assets/favicon/apple-icon-180x180.png">
26+
<link rel="icon" type="image/png" sizes="192x192" href="./src/assets/favicon/android-icon-192x192.png">
27+
<link rel="icon" type="image/png" sizes="32x32" href="./src/assets/favicon/favicon-32x32.png">
28+
<link rel="icon" type="image/png" sizes="96x96" href="./src/assets/favicon/favicon-96x96.png">
29+
<link rel="icon" type="image/png" sizes="16x16" href="./src/assets/favicon/favicon-16x16.png">
30+
<link rel="manifest" href="./src/assets/favicon/manifest.json">
31+
<meta name="msapplication-TileColor" content="#ffffff">
32+
<meta name="msapplication-TileImage" content="./src/assets/favicon/ms-icon-144x144.png">
33+
<meta name="theme-color" content="#ffffff">
34+
35+
<meta name="robots" content="index, follow">
36+
<meta name="googlebot" content="index,follow">
37+
<meta name="description" content="vue-scroll-progress | Simple Vue.js plugin for page scroll progress bar">
38+
<meta name="keywords"
39+
content="Vue, Vue.js, Plugin, Library, Scroll, Progress, Material, Design, Spemer, Hyouk Seo, GitHub, NPM, JS, JavaScript, Web">
40+
41+
<meta property="og:title" content="vue-scroll-progress | Simple Vue.js plugin for page scroll progress bar">
42+
<meta property="og:description" content="vue-scroll-progress | Simple Vue.js plugin for page scroll progress bar">
43+
<meta property="og:image" content="./src/assets/metacard.png">
44+
<meta property="og:type" content="website">
45+
<meta property="og:url" content="https://spemer.github.io/vue-scroll-progress/">
46+
47+
<meta name="twitter:title" content="vue-scroll-progress | Simple Vue.js plugin for page scroll progress bar">
48+
<meta name="twitter:description" content="vue-scroll-progress | Simple Vue.js plugin for page scroll progress bar">
49+
<meta name="twitter:image:src" content="./src/assets/metacard.png">
50+
<meta name="twitter:image" content="./src/assets/metacard.png">
51+
<meta name="twitter:card" content="summary">
52+
<meta name="twitter:site" content="@officialspemer">
53+
<meta name="twitter:creator" content="@officialspemer">
54+
55+
<meta itemprop="description" content="vue-scroll-progress | Simple Vue.js plugin for page scroll progress bar">
56+
<meta itemprop="image" content="./src/assets/metacard.png">
57+
58+
<link rel="canonical" href="https://spemer.github.io/vue-scroll-progress/">
59+
</head>
60+
61+
<body>
62+
<div id="app"></div>
63+
<noscript>You need to enable JavaScript to run this app.</noscript>
64+
<!-- <script src="https://spemer.github.io/vue-scroll-progress/dist/build.js"></script> -->
65+
<script src="/dist/build.js"></script>
66+
</body>
67+
6368
</html>

‎src/vue-scroll-progress.js

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ var VueScrollProgress = {
33
Vue.mixin({
44
mounted: function mounted() {
55
var progressContainerEl,
6-
progressEl,
7-
height,
8-
windowScrollPixels,
9-
windowScrollPercents
6+
progressEl,
7+
height,
8+
windowScrollPixels,
9+
windowScrollPercents
10+
11+
// TODO: enable bottom scroll bar
1012

1113
progressContainerEl = document.createElement('div')
1214
progressContainerEl.id = 'progress-container-el'
@@ -27,17 +29,17 @@ var VueScrollProgress = {
2729

2830
windowScrollPixels = 0
2931
windowScrollPercents = 0
30-
height = (document.documentElement.scrollHeight
31-
- document.documentElement.clientHeight)
32+
height = (document.documentElement.scrollHeight -
33+
document.documentElement.clientHeight)
3234

3335
window.addEventListener('scroll', () => {
34-
windowScrollPixels = (document.body.scrollTop
35-
|| document.documentElement.scrollTop)
36+
windowScrollPixels = (document.body.scrollTop ||
37+
document.documentElement.scrollTop)
3638
windowScrollPercents = (windowScrollPixels / height) * 100
3739
progressEl.style.width = windowScrollPercents + '%'
3840
})
3941

40-
if (! document.getElementById('progress-container-el')) {
42+
if (!document.getElementById('progress-container-el')) {
4143
progressContainerEl.appendChild(progressEl)
4244
document.body.appendChild(progressContainerEl)
4345
}

0 commit comments

Comments
 (0)