<header class="fixed-menu">
    <nav>
        <ul>
            <li><a href="#section1">Секция 1</a></li>
            <li><a href="#section2">Секция 2</a></li>
            <li><a href="#section3">Секция 3</a></li>
        </ul>
    </nav>
</header>

<section id="section1" class="light-section">
    <h1>Секция 1</h1>
</section>
<section id="section2" class="dark-section">
    <h1>Секция 2</h1>
</section>
<section id="section3" class="light-section">
    <h1>Секция 3</h1>
</section>
.fixed-menu {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.8); /* Прозрачный фон */
    transition: color 0.3s ease, background 0.3s ease;
}

.fixed-menu a {
    color: black;
    text-decoration: none;
    transition: color 0.3s ease;
}

.fixed-menu.dark a {
    color: white;
}

section {
    height: 100vh; /* Высота каждой секции на весь экран */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
}

.light-section {
    background-color: white;
    color: black;
}

.dark-section {
    background-color: black;
    color: white;
}
document.addEventListener('DOMContentLoaded', () => {
    const menu = document.querySelector('.fixed-menu');
    const sections = document.querySelectorAll('section');

    const observerOptions = {
        root: null, // Отслеживать относительно viewport
        threshold: 0.1, // 10% видимости секции
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // Проверяем класс текущей секции
                if (entry.target.classList.contains('dark-section')) {
                    menu.classList.add('dark');
                } else {
                    menu.classList.remove('dark');
                }
            }
        });
    }, observerOptions);

    // Наблюдаем за всеми секциями
    sections.forEach(section => observer.observe(section));
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.