webgraph,
при условии строки 21 top: 0;
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<nav class="nav"></nav>
<section class="container" style="height: 250px; background: green"></section>
<div style="height: 1000px"></div>
<section class="container" style="height: 250px; background: yellow"></section>
<div style="height: 1000px"></div>
<section class="container" style="height: 250px; background: blue"></section>
<div style="height: 1000px"></div>
<style>
nav {
background-color: red;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
z-index: 1;
}
.nav.active{
background-color: blue;
}
</style>
<script>
const nav = document.querySelector('nav');
const navHeight = nav.offsetHeight;
const boxs = Array.from(document.querySelectorAll('.container'));
const navAddCls = () => {
const add = boxs.some(box => {
const rect = box.getBoundingClientRect();
const y = rect.bottom / (navHeight + rect.bottom - rect.top);
return y > 0 && y < 1;
})
nav.classList.toggle('active', add)
}
window.addEventListener('scroll', navAddCls);
navAddCls()
</script>
</body>
</html>