https://sihuiji.github.io/PhysMaster-Page/static/js/nav-bar.js

1document.addEventListener("scroll", function() {
2    let navLinks = document.querySelectorAll('.nav-bar .nav-link');
3
4    let navBar = document.getElementById('nav-bar');
5    let header = document.getElementById('header-container');
6
7    // Check the scroll position\
8    headerBottom = header.getBoundingClientRect().bottom;
9    if (headerBottom > 0) {
10        navBar.style.display = 'none';
11    } else {
12        navBar.style.display = 'block';
13    }
14
15    // check for mobile window size
16    if (window.innerWidth < 768) {
17        navBar.style.display = 'none';
18    }
19
20    navLinks.forEach(link => {
21        let section = document.querySelector(link.getAttribute('href'));
22        if (!section) return; // Skip if the section doesn't exist
23
24        const sectionTop = section.getBoundingClientRect().top;
25        const sectionBottom = section.getBoundingClientRect().bottom;
26
27        // Check if the section is in the viewport
28        if (sectionTop < window.innerHeight && sectionBottom >= 0) {
29            link.classList.add('active-link');
30        } else {
31            link.classList.remove('active-link');
32        }
33    });
34});