交叉口观察者，页面正在移动答案

【问题标题】：Intersection observer, page is moving交叉口观察者，页面正在移动
【发布时间】：2022-01-17 06:49:21
【问题描述】：

您好，我对路口观察器有疑问。当它应用时页面有一个小的延迟并且页面上的内容移动了一点是什么问题？如何让它变得流畅，它只显示而不对内容不做任何事情？我将不胜感激。

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

【问题讨论】：

标签： javascript html css sass

【解决方案1】：

我通过导航栏的绝对定位解决了这个问题

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。