https://skillsforjobs.ca/js/header-scroll.js

1var doc = document.documentElement;
2var w = window;
3
4var prevScroll = w.scrollY || doc.scrollTop;
5var curScroll;
6var direction = 0;
7var prevDirection = 0;
8
9var header = document.getElementById('header');
10
11var checkScroll = function() {
12
13  /*
14  ** Find the direction of scroll
15  ** 0 - initial, 1 - up, 2 - down
16  */
17
18  curScroll = w.scrollY || doc.scrollTop;
19  if (curScroll > prevScroll) {
20    //scrolled up
21    direction = 2;
22  }
23  else if (curScroll < prevScroll) {
24    //scrolled down
25    direction = 1;
26  }
27
28  if (direction !== prevDirection) {
29    toggleHeader(direction, curScroll);
30  }
31
32  if (doc.scrollTop === 0) {
33    header.classList.add('hide');
34    header.classList.remove('show');
35    header.classList.remove('mobile-hide');
36  }
37  else if (doc.scrollTop > 100) {
38    header.classList.remove('hide');
39  }
40
41  prevScroll = curScroll;
42};
43
44var toggleHeader = function(direction, curScroll) {
45  if (direction === 2 && curScroll > 100) {
46
47    header.classList.add('show');
48    header.classList.remove('mobile-hide');
49    prevDirection = direction;
50  }
51  else if (direction === 1) {
52    //header.classList.remove('show');
53    header.classList.add('mobile-hide');
54    prevDirection = direction;
55  }
56};
57
58window.addEventListener('scroll', checkScroll);