docs/public/nav.js


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

const nav = document.querySelector('body > header');

if (!window.matchMedia('(prefers-reduced-motion)').matches) {
  window.addEventListener('scroll', onScroll, { passive: true });
}

let prev = -1;
let prevDir = 0;
let threshold = 32;

function onScroll() {
  const curr = window.scrollY;
  const dir = curr > prev ? 1 : -1;
  
  if (curr < threshold) {
    show();
    document.documentElement.classList.add('initial');
  } else if (dir !== prevDir) {
    if (dir === 1) {
      hide();
    } else {
      show();
    }
  }
  
  prev = curr;
}

const hide = () => {
  nav.classList.add('hidden')
  document.documentElement.classList.add('scrolled');
  document.documentElement.classList.remove('initial');
};
const show = () => {
  nav.classList.remove('hidden');
  document.documentElement.classList.remove('scrolled');
}