<section class="relative bg-red-light h-screen">
 <div class="absolute pin-y pin-x nav-clip pointer-events-none">
    <nav class="fixed pin-t text-5xl bg-red-light px-4 pointer-events-auto">CODEPEN</nav>
  </div>
  <p class="px-4 pt-16">1 Lorem ipsum...</p>
</section>

<section class="relative bg-green-light h-screen">
 <div class="absolute pin-y pin-x nav-clip pointer-events-none">
    <nav class="fixed pin-t text-5xl text-white bg-green-light px-4 pointer-events-auto">CODEPEN</nav>
  </div>
  <p class="px-4 pt-16">2 Lorem ipsum...</p>
</section>

<section class="relative bg-blue-light h-screen">
<div class="absolute pin-y pin-x nav-clip pointer-events-none">
    <nav class="fixed pin-t text-5xl bg-blue-light px-4 pointer-events-auto">CODEPEN</nav>
  </div>
  <p class="px-4 pt-16">3 Lorem ipsum...</p>
</section> 

.nav-clip {
  -webkit-clip-path: inset(0px);
  clip-path: inset(0px);
}