滚动回顶部时导航栏位置保持固定

Question

实际上我试图在滚动时实现粘性导航，如果 onscroll 大于 #navbar offsetTop，我使用 javascript if...else 语句将 .sticky 类添加到 #navbar，否则删除.sticky 的类，我将 position: fixed; 和 width: 100%; 和 top: 0; 添加到 .sticky，幸运的是，如果滚动大于 #navbar offsetTop

我的问题是：- 当滚动小于#navbar offsetTop 时，.sticky 类不会删除并且#navbar 在滚动回顶部时保持固定，我该如何修复它，我的导航栏将当scroll小于#navbaroffsetTop时恢复正常..

HTML

<header>
    <p>FaceMash</p>
    <div id="headnotify">
        <a href="#">????</a>
        <a href="#">????</a>
        <a href="#">????</a>
        <a href="#">????</a>
    </div>  
</header>

<div id="navbar">
    <a href="#">Home</a>
    <a href="#">Explore</a>
    <a href="#">Discover</a>
    <a href="#">Filter</a>
    <a href="#">Docs</a>
    <a href="#">More</a>
</div>

<section>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto obcaecati exercitationem nam fugiat, ab molestias quo saepe, sed iste doloribus earum, expedita quia nobis quidem quasi aliquid eos ullam! Qui fugiat, dolores quasi velit quae maxime blanditiis id. Aspernatur, omnis laudantium autem voluptate quibusdam dolor, alias tempora nam, blanditiis hic nihil iure saepe recusandae. Harum officia maxime laborum quia explicabo laudantium odit quisquam alias libero natus, voluptas voluptate nisi perspiciatis quam iusto rem atque officiis vitae cumque ad dolore, debitis labore. Natus ea expedita cupiditate, deserunt provident, laboriosam error beatae inventore consequuntur necessitatibus facere. Suscipit quis corrupti alias dolor ex error natus, expedita sed, voluptatibus aliquam quisquam earum voluptate rem animi omnis harum placeat quos unde! Debitis tempora, magni ex, nostrum ipsam consequuntur. Eaque, dolorem, tempore totam minus odio pariatur, veniam ad fugiat, incidunt harum dolorum quibusdam error cumque quae. Ipsam, necessitatibus nesciunt provident. Aliquid aut, dolorum! Dolor earum laborum repellendus at iure maiores quas enim reprehenderit ex ullam sequi possimus autem incidunt, porro vero quibusdam consectetur aspernatur accusamus et consequatur ipsum fugit. Totam officia nesciunt, accusantium sapiente quis placeat voluptatum, itaque repellat ratione. Non quis saepe eaque fugiat aliquam sit. Rerum aspernatur culpa, adipisci illum ea distinctio debitis quasi omnis sequi, natus, nulla. Voluptatum vel, quidem hic, autem dolore modi? Beatae quod sit, neque ex ab, tempore quam vel culpa ea quasi corporis vero, quaerat ipsam necessitatibus rem magnam, earum eius dignissimos ducimus exercitationem eveniet! Consectetur minus vitae, voluptatum suscipit. Voluptatibus esse aut eaque delectus. Consequatur molestias quam voluptatibus, quidem necessitatibus dolorem harum explicabo ut quas, amet magnam voluptatum illum quia laborum in voluptate expedita blanditiis. Sapiente fuga culpa maiores eum eligendi eaque sit explicabo vitae fugiat soluta, rerum vel atque perferendis repellat fugit mollitia ab, adipisci inventore? Quidem tempore commodi hic. Voluptatem nostrum possimus, asperiores minima animi numquam.
    </p>
</section>

CSS

body{
    margin: 0;
    padding: 0;
    font-family: arial;
}

#navbar{
    display: flex;
    height: 50px;
    color: #fff;
    -ms-align-items: center;
    align-items: center;
    background-color: gray;
}

#navbar a{
    padding: 15px 30px;
    color: #fff;
    text-decoration: none;
}

#navbar a:hover{
    background-color: rgba(0,0,0,.1);
}

header{
    height: 100px;
    display: flex;
    -ms-align-items: center;
    align-items: center;
}

header p{
    font-size: 1.8em;
    color: gray;
    margin-left: 30px;
}

header #headnotify{
    margin-left: auto;
    margin-right: 50px;
    display: flex;
}

header #headnotify a{
    text-decoration: none;
    padding: 10px 25px;
    font-size: 1.5em;
}

header #headnotify a:hover{
    background-color: #f1f1f1;
}


section{
    width: 90%;
    border: 1px solid gray;
    padding: 30px;
    margin: 30px auto ;
}

section p{
    font-size: 1.4em;
    line-height: 30px;
    color: gray;
}

.sticky{
    position: fixed;
    width: 100%;
    top: 0;
}

JAVASCRIPT

<script type="text/javascript">
    const navbar = document.getElementById("navbar");

    function scrollNav() {
        if (window.pageYOffset >= navbar.offsetTop) {
            navbar.classList.add('sticky');
        }else {
            navbar.classList.remove('sticky');
        }
    }

    window.onscroll = function () {
        scrollNav();
    }
</script>

Answer 1

问题在于您的函数会不断重新计算偏移量，因为您的事件绑定到 onscroll。这意味着当它设置为sticky 时，偏移量变得不可预测。您可以通过在函数外部拉出offsetTop 变量来解决此问题，因此它只计算一次。

var navbar = document.getElementById("navbar");
var navbarOffset = navbar.offsetTop;

window.onscroll = function () {
    window.pageYOffset >= navbarOffset ? navbar.classList.add('sticky') : navbar.classList.remove('sticky')
}