diff options
Diffstat (limited to 'src/js/header.js')
-rwxr-xr-x | src/js/header.js | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/src/js/header.js b/src/js/header.js new file mode 100755 index 0000000..3b499cc --- /dev/null +++ b/src/js/header.js @@ -0,0 +1,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); |