<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));
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.