https://aymuos15.github.io/js/chrome-autohide.js

1/* Auto-hide the header + footer.
2
3   They show as a pair when the visitor enters the site or switches sections,
4   linger briefly, then fade away. They return only when the visitor clicks
5   something or brings the pointer up to the top edge of the viewport — after
6   which they fade out again once things go quiet. */
7(() => {
8  const header = document.querySelector(".header");
9  const footer = document.querySelector(".footer");
10  if (!(header && footer)) {
11    return;
12  }
13
14  const navLinksContainer = document.querySelector(".nav-links");
15
16  // How long the chrome lingers after being summoned before fading out.
17  const HIDE_DELAY = 2200;
18  // How close (px) the pointer must get to the top edge to summon the chrome.
19  const TOP_EDGE = 80;
20
21  let hideTimer = null;
22
23  function hide() {
24    // Never fade out from under an open nav dropdown — wait it out instead.
25    if (navLinksContainer?.classList.contains("open")) {
26      scheduleHide();
27      return;
28    }
29    header.classList.add("chrome--hidden");
30    footer.classList.add("chrome--hidden");
31  }
32
33  function scheduleHide() {
34    clearTimeout(hideTimer);
35    hideTimer = setTimeout(hide, HIDE_DELAY);
36  }
37
38  function reveal() {
39    header.classList.remove("chrome--hidden");
40    footer.classList.remove("chrome--hidden");
41    scheduleHide();
42  }
43
44  // Show once on arrival, then fade out.
45  reveal();
46
47  // A click anywhere brings them back. Capture so the header is un-hidden
48  // before the click's own handlers (nav, theme toggle) run.
49  document.addEventListener("click", reveal, true);
50
51  // Reaching the top edge with the pointer summons them too; staying up there
52  // keeps re-arming the timer so they linger while you're up top.
53  document.addEventListener(
54    "mousemove",
55    (e) => {
56      if (e.clientY <= TOP_EDGE) {
57        reveal();
58      }
59    },
60    { passive: true }
61  );
62
63  // Section switches (nav.js) re-show the pair even when not click-driven.
64  document.addEventListener("sectionchange", reveal);
65})();