Permalink
Dec 12, 2014
Newer
100644
151 lines (137 sloc)
5.67 KB
1
/*
2
* Scrolline.js - Create an indication bar line of scroll position
3
* Basic usage : $.scrolline();
4
* ---
5
* Version: 1.0
6
* Copyright 2014, Anthony Ly (http://anthonyly.com)
7
* Released under the MIT Licence
8
*/
9
10
(function($, window, document, undefined) {
11
$.extend({
12
scrolline: function (options) {
13
var defaults = {
14
backColor : '#ecf0f1',
15
direction : 'horizontal',
16
frontColor : '#2ecc71',
17
opacity : 1,
18
position : 'top',
19
reverse : false,
20
weight : 5,
21
zindex : 10,
22
scrollEnd : function() {}
23
};
24
25
function Plugin(options) {
26
this.params = $.extend(defaults, options);
27
this.$back = $(document.createElement('div'));
28
this.$front = $(document.createElement('div'));
29
this.init();
30
}
31
32
Plugin.prototype = {
33
init : function() {
34
var self = this,
35
tBack, rBack, bBack, lBack, bgBack,
36
tFront, rFront, bFront, lFront, bgFront;
37
38
// Direction and position
39
if(self.params.direction != 'vertical') self.params.direction = 'horizontal';
40
if(self.params.direction == 'vertical' && self.params.position != 'right') self.params.position = 'left';
41
if(self.params.direction == 'horizontal' && self.params.position != 'bottom') self.params.position = 'top';
42
43
if(self.params.direction == 'vertical') {
44
bBack = tBack = 0;
45
if(self.params.position == 'right') {
46
rBack = 0;
47
lBack = 'auto';
48
} else {
49
rBack = 'auto';
50
lBack = 0;
51
}
52
} else {
53
rBack = lBack = 0;
54
if(self.params.position == 'bottom') {
55
tBack = 'auto';
56
bBack = 0;
57
} else {
58
tBack = 0;
59
bBack = 'auto';
60
}
61
}
62
63
if(self.params.reverse && self.params.reverse === true) {
64
if(self.params.direction == 'vertical') {
65
bFront = rFront = lFront = 0;
66
tFront = 'auto';
67
} else {
68
bFront = rFront = rFront = 0;
69
lFront = 'auto';
70
}
71
} else {
72
tFront = lFront = 0;
73
bFront = rFront = 'auto';
74
}
75
76
self.$front.css({
77
background : self.params.frontColor,
78
bottom : bFront,
79
height : 0,
80
left : lFront,
81
margin: 0,
82
overflow: 'hidden',
83
padding: 0,
84
position: 'absolute',
85
right : rFront,
86
top: tFront,
87
width : 0
88
}).appendTo(self.$back);
89
90
self.$back.css({
91
background : self.params.backColor,
92
bottom: bBack,
93
height : 0,
94
left : lBack,
95
opacity: self.params.opacity,
96
margin: 0,
97
overflow: 'hidden',
98
position: 'fixed',
99
padding: 0,
100
right : rBack,
101
top: tBack,
102
width : 0,
103
zIndex : self.params.zindex,
104
}).appendTo('body');
105
106
$(window).on("load resize scroll orientationchange", function() {
107
self.scrollListener();
108
});
109
},
110
111
scrollListener : function() {
112
var self = this,
113
hWin = $(window).height(),
114
wWin = $(window).width(),
115
hDoc = $(document).height(),
116
scrollValue = $(window).scrollTop(),
117
wBack, hBack, wFront, hFront, scrollineVal, wRef;
118
119
if(self.params.direction == 'vertical') {
120
scrollineVal = (scrollValue + hWin) * hWin / hDoc;
121
wBack = self.params.weight;
122
hBack = wRef = hWin;
123
wFront = self.params.weight;
124
hFront = scrollineVal;
125
} else {
126
scrollineVal = (scrollValue + hWin) * wWin / hDoc;
127
wBack = wRef = wWin;
128
hBack = self.params.weight;
129
wFront = scrollineVal;
130
hFront = self.params.weight;
131
}
132
133
self.$back.css({
134
height: hBack,
135
width: wBack
136
});
137
self.$front.css({
138
height: hFront,
139
width: wFront
140
});
141
142
if(scrollineVal >= wRef) {
143
self.params.scrollEnd();
144
}
145
}
146
};
147
148
new Plugin(options);
149
}
150
});
151
})(jQuery, window, document);