;(function() { 'use strict'; document.addEventListener('DOMContentLoaded', function() { // --- 1. Get Element References --- let prevScrollPos = window.scrollY || window.pageYOffset; const header = document.getElementById("mainHeader"); const toc = document.getElementById("toc"); // Exit if the main header is not found if (!header) { return; } const headerHeight = header.offsetHeight; // --- 2. Scroll Event Listener --- window.onscroll = function() { const currentScrollPos = window.scrollY || window.pageYOffset; // ======================================================= // A. Main Header Hide/Show Logic // ======================================================= // Scrolling UP - Show the header if (prevScrollPos > currentScrollPos) { header.classList.remove("header-hidden"); } // Scrolling DOWN AND past the header height - Hide the header else if (currentScrollPos > headerHeight) { header.classList.add("header-hidden"); } // ======================================================= // B. Dynamic TOC Scroll Logic // ======================================================= // Check if the TOC element was found if (toc) { // Damping Factor: Controls the speed (5 is a good balance) const dampingFactor = 5; const scrollOffset = currentScrollPos / dampingFactor; toc.style.transform = `translateY(-${scrollOffset}px)`; } // ======================================================= // C. Update Position // ======================================================= prevScrollPos = currentScrollPos; }; }); })();