fix-nav.js
2.73 KB
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/**
* make the nav (or any element) to be fixed on top
* author: Bill.Zhao
* repository: https://github.com/buildAll/fix-nav.js/blob/master/fix-nav.js
* license: MIT
*/
var $ = require('yoho-jquery');
(function() {
$.fn.fixNav = function() {
// var defaults = {
// };
// var settings = $.extend({}, defaults, options);
var scrollDirection = {
direction: '',
preScrollTop: 0,
curScrollTop: 0,
getDirection: function() {
this.curScrollTop = $(window).scrollTop();
this.curScrollTop < this.preScrollTop ?
this.direction = 'up' :
this.direction = 'down';
this.preScrollTop = this.curScrollTop;
},
isUp: function() {
this.getDirection();
return this.direction === 'up';
},
isDown: function() {
this.getDirection();
return this.direction === 'down';
}
};
var styleCtrl = {
isSet: false,
preStyle: '',
preTop: null,
$el: null,
setFix: function(el, originTop) {
if (!this.isSet) {
this.$el = $(el);
this.preStyle = this.$el.attr('style');
this.preTop = originTop;
this.$el.css({
position: 'fixed',
top: 0,
'z-index': 9999
});
this.isSet = true;
}
},
clearFix: function() {
var windowTop;
if (this.$el) {
windowTop = $(window).scrollTop();
if (windowTop <= this.preTop) {
if (this.preStyle) {
this.$el.attr('style', this.preStyle);
} else {
this.$el.removeAttr('style');
}
this.isSet = false;
}
}
}
};
return this.each(function(index, el) {
var viewportOffset = el.getBoundingClientRect();
var originPoistion = viewportOffset.top;
$(window).scroll(function() {
var subViewportOffset = el.getBoundingClientRect();
var elementTop = subViewportOffset.top;
if (scrollDirection.isDown() && elementTop <= 0) {
styleCtrl.setFix(el, originPoistion);
} else {
styleCtrl.clearFix();
}
});
});
};
}());