blob: 3b499cc805c51faf26b74e027c4a88e2b7c97e86 (
plain)
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
|
(function($) {
'use strict';
// Hide the header when the user scrolls down, and show it when he scrolls up
/**
* Header
* @constructor
*/
var Header = function() {
this.$header = $('#header');
this.headerHeight = this.$header.height();
// CSS class located in `source/_css/layout/_header.scss`
this.headerUpCSSClass = 'header-up';
this.delta = 5;
this.lastScrollTop = 0;
};
Header.prototype = {
/**
* Run Header feature
* @return {void}
*/
run: function() {
var self = this;
var didScroll;
// Detect if the user is scrolling
$(window).scroll(function() {
didScroll = true;
});
// Check if the user scrolled every 250 milliseconds
setInterval(function() {
if (didScroll) {
self.animate();
didScroll = false;
}
}, 250);
},
/**
* Animate the header
* @return {void}
*/
animate: function() {
var scrollTop = $(window).scrollTop();
// Check if the user scrolled more than `delta`
if (Math.abs(this.lastScrollTop - scrollTop) <= this.delta) {
return;
}
// Checks if the user has scrolled enough down and has past the navbar
if ((scrollTop > this.lastScrollTop) && (scrollTop > this.headerHeight)) {
this.$header.addClass(this.headerUpCSSClass);
}
else if (scrollTop + $(window).height() < $(document).height()) {
this.$header.removeClass(this.headerUpCSSClass);
}
this.lastScrollTop = scrollTop;
}
};
$(document).ready(function() {
var header = new Header();
header.run();
});
})(jQuery);
|