static/scripts/core.js

   1 /* luflow.net web site */
   2 /* Public domain 2025. All rights waived */
   3
   4 // handle menu toggle while in mobile (or smaller) type screens:
   5 let menuToggle = document.querySelector('.menuToggle');
   6 let header = document.querySelector('header');
   7 menuToggle.onclick = function () {
   8     header.classList.toggle('active');
   9 };
  10
  11 // hide header navigation bar when scrolling down, and show again when scrolling up:
  12 let lastScrollTop = 0;
  13 let navbarHeight = 100;
  14 let didScroll = false;
  15 let delta = 5;
  16
  17 window.onscroll = function () {
  18     didScroll = true;
  19 };
  20
  21 setInterval(function () {
  22     if (didScroll) {
  23         hasScrolled();
  24         didScroll = false;
  25     }
  26 }, 250);
  27
  28 function hasScrolled() {
  29     let scrollTop = document.documentElement.scrollTop;
  30
  31     if (Math.abs(lastScrollTop - scrollTop) <= delta) {
  32         return;
  33     }
  34
  35     if (scrollTop > lastScrollTop && scrollTop > navbarHeight) {
  36         header.classList.add('nav-up');
  37         header.classList.remove('nav-down');
  38     } else {
  39         header.classList.remove('nav-up');
  40         header.classList.add('nav-down');
  41     }
  42
  43     lastScrollTop = scrollTop;
  44 }