assets/js/progress-bar.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
38

// progress-bar.js
(function() {
  const progressBar = document.querySelector('.reading-progress');
  if (!progressBar) return;

  // Only enable on pages with substantial content
  const mainContent = document.querySelector('main');
  if (!mainContent) return;

  function updateProgress() {
    // Calculate scroll percentage
    const windowHeight = window.innerHeight;
    const docHeight = document.documentElement.scrollHeight - windowHeight;
    const scrolled = window.scrollY;
    const percent = docHeight > 0 ? (scrolled / docHeight) * 100 : 0;

    progressBar.style.width = percent + '%';
  }

  // Mark body as scrollable if there's significant content
  const contentHeight = mainContent.offsetHeight;
  if (contentHeight > window.innerHeight * 1.5) {
    document.body.classList.add('scrollable');
  }

  // Use requestAnimationFrame for smooth updates
  let ticking = false;
  window.addEventListener('scroll', function() {
    if (!ticking) {
      requestAnimationFrame(updateProgress);
      ticking = true;
      setTimeout(() => { ticking = false; }, 100);
    }
  }, { passive: true });

  // Initial update
  updateProgress();
})();