Hola, tengo un problema con el observador de intersecciones. Cuando se aplica, la página tiene un pequeño retraso y el contenido de la página se mueve un poco, ¿cuál es el problema? ¿Cómo hacer que sea suave, que solo se muestra y no hace nada con el contenido? Agradecería cualquier tipo de ayuda.

HTML:

 <nav class="navbar"> <img src="/images/Brabant.png" class="navbar__logo"> <h1 class="navbar__header">Lion of Brabant</h1> <div class="navbar__links"> <a class="navbar__link">about</a> <a class="navbar__link">stories</a> <a class="navbar__link">contact</a> </div> </nav> <section class="section" id="section--1"> <div class="main"> <h1 class="main__header">Luxury close to you</h1> </div> </section>

SCSS:

 .navbar { display: flex; flex-direction: row; justify-content: center; align-items: center; color: $light--brown; height: 7vh; width: 100%; background-color: black; z-index: 100; transition: all .5s; @include borderBottomPrimary; .navbar.sticky { transition: all .5s; position: fixed; }

JS:

 const navbar = document.querySelector('.navbar') const main = document.querySelector('.main') const navHeight = navbar.getBoundingClientRect().height; console.log(navHeight) const callback = function(entries, observer) { const [entry] = entries; console.log(entry) if (!entry.isIntersecting) { console.log('ser') navbar.classList.add('sticky') } else { navbar.classList.remove('sticky') } } let observer = new IntersectionObserver(callback,{ root: null, threshold: 0, rootMargin: `-${navHeight}px`, }); ; observer.observe(main);