[Nexus]

и класс .active нужно добавлять не к .container , а к .nav !)))

Сами.

<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: red;
      position: fixed;
      top: 0;
      left: 0;
      height: 50px;
      width: 100%;
      z-index: 1;
    }
    
    .active {
        opacity: 0.25;
    }
</style>

<script>
    const navHeight = document.querySelector('nav').offsetHeight;
    
    window.addEventListener('scroll', function () {
        document.querySelectorAll('.container').forEach(function (node) {
            const rect = node.getBoundingClientRect();
            
            if (rect.y >= -rect.height && rect.y <= navHeight) {
                node.classList.add('active');
            } else {
                node.classList.remove('active');
            }
        });
    });
</script>