JavaScript ScrollSpy

ScrollSpy from scratch using Vanilla JavaScript

Watch the full tutorial here:
Youtube Rumble Odysee

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <script src="./main.js" defer></script>
    <title>Scrollspy</title>
</head>

<body>
    <header id="header">
        <span>logo</span>
        <nav id="navLinks">
            <a href="#home">home</a>
            <a href="#service">service</a>
            <a href="#about">about</a>
            <a href="#contact">contact</a>
        </nav>
    </header>
    <main id="main">
        <section id="home">home</section>
        <section id="service">service</section>
        <section id="about">about</section>
        <section id="contact">contact</section>
    </main>
</body>

</html>

css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #131313;
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}

header {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFF;
    padding: 0 15px;
    z-index: 1000;
    top: 0;

    & nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }
}

main {
    display: flex;
    flex-direction: column;

    #home {
        width: 100%;
        height: 350px;
    }

    #service {
        width: 100%;
        height: 300px;
    }

    #about {
        width: 100%;
        height: 250px;
    }

    #contact {
        width: 100%;
        height: 400px;
    }
}

javascript

const navEl = document.getElementById("navLinks");
const headerEl = document.getElementById("header");
const mainEl = document.getElementById("main");

window.addEventListener("DOMContentLoaded", () => {
    headerFunc();
});

window.addEventListener("scroll", () => {
    headerFunc();
});

function headerFunc() {
    const heightVal = window.scrollY;

    if (heightVal > 1) {
        headerEl.style.position = "fixed";
        headerEl.style.boxShadow = "0px 2px 10px 2px #00000007";
        mainEl.style.marginTop = "50px";
    } else {
        headerEl.style.position = "unset";
        headerEl.style.boxShadow = "unset";
        mainEl.style.marginTop = "0px";
    }
}

document.querySelectorAll("header nav a").forEach(anchor => {
    anchor.addEventListener("click", (e) => {
        e.preventDefault();

        const targetId = e.target.getAttribute("href").split("#")[1];
        const targetEl = document.getElementById(targetId);
        const headerHeight = document.getElementById("header").offsetHeight;
        const targetPosition = targetEl.offsetTop - headerHeight;

        window.scrollTo({
            top: targetPosition,
            behavior: "smooth"
        });
    });
});