[Nexus]

<nav class="nav"></nav>
 
<section class="container" style="height: 1000px; background: green"></section>
<section class="container" style="height: 1000px; background: yellow"></section>
<section class="container" style="height: 1000px; background: blue"></section>

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

<script>
    var observer = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function (entry) {
        entry.target.classList[entry.isIntersecting ? 'add' : 'remove']('active');
      });
    }, {threshold: 0.25});

    document.querySelectorAll('.container').forEach(function(node) {
      observer.observe(node);
    });
</script>