粘性导航的奇怪问题

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

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