Question

实际上，我试图在滚动时实现导航便利，并且如果onscroll大于{{，则我使用javascript if...else语句向.sticky添加#navbar类1}} offsetTop，否则删除#navbar的类，然后将.sticky和position: fixed;和width: 100%;添加到top: 0;，幸运的是，这些添加类{如果滚动大于.sticky offsetTop

，则从{1}}到.sticky

我的问题是：-当滚动小于#navbar offsetTop时，#navbar类不会移除，并且#navbar保持固定，当滚动回到顶部时，我该怎么办？修复了当滚动小于.sticky offsetTop时导航栏将恢复正常的问题。

HTML

#navbar

CSS

#navbar

JAVASCRIPT

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

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')
}

导航到顶部时导航栏位置保持固定

1 个答案: