https://banafo.com/static/javascripts/header.js

1$(document).ready(function(){
2
3	/**
4	 * This object controls the nav bar. Implement the add and remove
5	 * action over the elements of the nav bar that we want to change.
6	 *
7	 * @type {{flagAdd: boolean, elements: string[], add: Function, remove: Function}}
8	 */
9	var myNavBar = {
10
11		flagAdd: true,
12		isScrolling: false,
13		isExpanded: false,
14
15		elements: [],
16
17		init: function (elements) {
18			this.elements = elements;
19		},
20
21		add : function() {
22
23			if(this.flagAdd) {
24				for(var i=0; i < this.elements.length; i++) {
25
26					const el = document.getElementById(this.elements[i]);
27					el.classList.add(`bg-${el.dataset.bg}`, "shadow-md");
28				}
29				this.flagAdd = false;
30			}
31		},
32
33		remove: function() {
34
35			for(var i=0; i < this.elements.length; i++) {
36
37				const el = document.getElementById(this.elements[i]);
38				el.classList.remove(`bg-${el.dataset.bg}`, "shadow-md");
39			}
40			this.flagAdd = true;
41		},
42
43	};
44
45	/**
46	 * Init the object. Pass the object the array of elements
47	 * that we want to change when the scroll goes down
48	 */
49	myNavBar.init([
50		"header-nav",
51	]);
52
53	/**
54	 * Function that manage the direction
55	 * of the scroll
56	 */
57	function offsetManager(){
58
59		var yOffset = 0;
60		var currYOffSet = window.pageYOffset;
61
62		if(yOffset < currYOffSet) {
63			myNavBar.isScrolling = true;
64			myNavBar.add();
65		}
66		else if(currYOffSet === yOffset){
67			myNavBar.isScrolling = false;
68
69			if(myNavBar.isExpanded){
70				return;
71			}
72
73			myNavBar.remove();
74		}
75
76	}
77
78	function toggleManager() {
79
80		const el = document.getElementById('header-nav-toggler');
81
82		el.onclick = function(e) {
83
84			const expanded = el.ariaExpanded.toLowerCase() == 'true' ? true : false;
85
86			if(expanded) {
87
88				myNavBar.isExpanded = true;
89				myNavBar.add();
90			} else {
91
92				myNavBar.isExpanded = false;
93
94				if(myNavBar.isScrolling){
95					return;
96				}
97
98				myNavBar.remove();
99			}
100		};
101
102	}
103
104	/**
105	 * bind to the document scroll detection
106	 */
107	window.onscroll = function(e) {
108		offsetManager();
109	};
110
111	/**
112	 * We have to do a first detectation of offset because the page
113	 * could be load with scroll down set.
114	 */
115	offsetManager();
116
117	/**
118	 * Detect if menu is toggled
119	 */
120	toggleManager();
121});