index.js

const mobile_nav = document.querySelector(".mobile-navbar-button");
const nav_header = document.querySelector(".header");

const toggleNavbar = () =>
{
    nav_header.classList.toggle("active");
};
mobile_nav.addEventListener('click' , ()=> toggleNavbar());






let sections = document.querySelectorAll('section');
let navLinks = document.querySelectorAll('header nav a');
window.onscroll = () => {
    sections.forEach(sec => {
        let top = window.scrollY;
        let offset = sec.offsetTop - 150;
        let height = sec.offsetHeight;
        let id = sec.getAttribute('id');
        if(top >= offset && top < offset + height) {
            navLinks.forEach(links => {
                links.classList.remove('active');
                document.querySelector('header nav a[href*=' + id + ']').classList.add('active');
            });
        };
    });
};