Hello I have a problem with intersection observer. When it applies page has a small lag and content on the page moves a bit what is a problem? How to make it smooth that it just shows and do not nothing with content? I would appreciate any kind of help.

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);