javascript - 粘性导航的奇怪问题

Question

我的粘性导航是这样工作的: 如果我向下滚动，它会变成粘性的，如果我向上滚动，它会变成默认的。但是，我遇到的问题是，当我“刷新”页面时，我从第一页开始，在该页面上导航仍然是“粘性”的。然后我必须向下滚动，然后向上滚动以使其恢复到原始状态？

当我刷新的时候，首页的导航是粘的，就是这个问题。

然后在我向下滚动然后向上滚动后，导航就变得正确了。这是我刷新时想要的导航，但由于某种原因它是旧的。

      <nav class="sticky">
        <div class="row">
            <img src="resources/img/logo.png" class="logo">
            <img src="resources/img/logo-nav.png" class="logo-black">

            <ul class="main-nav">
                <li><a href="#">About Me</a></li>
                <li><a href="#">Hobbies</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Contact</a></li>

            </ul>


        </div>

    </nav>


.sticky .logo {
    display: none;
}

.sticky .logo-black {
    display: block;
}

.logo
{
    height: 100px;
    width: auto;
    float: left;
    margin-top: 20px;
    border-radius: 25%;


}

.logo-black {
    display: none;
    height: 50px;
    width: auto;
    float: left;
    margin: 5px 0;
}

这是我的基本导航。 logo-black 指的是“粘性导航标志”。 我相信我的格式和 html 是正确的，那么为什么会出现这个错误呢？这不是 jQuery 错误，我不这么认为，因为没有 jquery 它会做同样的事情。

$(document).ready(function () {
    $('.js-section-about').waypoint(function(direction) {
        if (direction == 'down'){
            $('nav').addClass('sticky');
        }
        else {
            $('nav').removeClass('sticky');
        }
    }, {
  offset: '60px;' 
})

});

Answer 1

更改 <nav class="sticky">至 <nav>在你的 HTML 中。这样，.sticky类只会由您的 jQuery 在滚动时添加。就目前而言，您指望您的代码删除 .sticky在页面加载时类并在您到达航路点时再次添加它。