tengo este fragmento El problema es que después de que la sección de inicio ya no sea visible, la barra de navegación debería ser visible y pegajosa, pero no lo es. Si me desplazo y vuelvo a la sección 1, la barra de navegación cambia. ¿Qué debo hacer para que la barra de navegación sea visible cuando la sección de inicio ya no esté visible y cuando regrese a la sección 1, la barra de navegación debería permanecer igual?
'use strict'; const home = document.querySelector('.section-1') ; const sections = document.querySelectorAll('.section') ; const section2 = document.querySelector('.section-2'); const nav = document.querySelector('nav') ; const options = { root:null, threshold:0 } const callback = function(entries) { entries.forEach(entry=>{ console.log(entry.target); if(!entry.isIntersecting) { nav.classList.add('stickynav'); console.log('navbar should be visible'); } else { console.log('intersect true') ; } }) } ; const sect1Observer = new IntersectionObserver(callback,options) ; sect1Observer.observe(home); *{ margin:0; padding:0; box-sizing:border-box; } nav { height:10vh; box-shadow:0 3px 3px black ; display:flex; justify-content:space-between; align-items:center; } .stickynav{ animation:anime 2s; position:fixed; position:absolute; z-index:10000; } @keyframes anime{ 0%{ transform:translateX(-100px) ; } 100%{ transform:translateX(0px) ; } } ul{ display:flex; justify-content:space-between ; margin-right:1vw; width:70%; } li{ list-style:none; } li a { text-decoration:none; font-size:3vw; } li a:hover { border-bottom:3px solid blue ; transition:0.2s; } section{ position:relative; height:100vh; display:flex; justify-content: center; align-items:center; top:0.5vh; } .section-1{ background:blue; } .section-2{ background:green; } .section-3{ background:pink; } <nav> <div class ="logo">Logo</div> <ul> <li><a href ="#">Home</a></li> <li><a href ="#">About</a></li> <li><a href ="#">Contact</a></li> </ul> </nav> <section class ="section section-1"> <h2>Home</h2> </section> <section class ="section section-2"> <h2>About</h2> </section> <section class ="section section-3"> <h2>Contact</h2>