Javascript 粘性导航的奇怪问题

我的粘性导航的工作原理如下： 如果我向下滚动，它会变为粘性的，如果我向上滚动，它会变为默认的。然而，我遇到的问题是，当我“刷新”页面时，我从第一页开始，而在该页面上导航仍然是“粘性的”。然后我要向下滚动，然后再向上滚动，使其成为原始状态

当我刷新时，它是首页上的粘性导航，这就是问题所在

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

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

---

将HTML中的

更改为

。这样，

.sticky

类将仅由滚动jQuery添加。目前，您正指望您的代码删除页面加载中的

.sticky

类，并在到达航路点时再次添加它。

如果我删除它，它怎么知道sticky是什么意思？@KSplitX您尝试过这个建议吗？您的文档将知道

.sticky

的含义，因为CSS定义了它。元素不需要以这种方式加载才能保持其含义。谢谢，它成功了！我只是想知道它是如何工作的，谢谢你清理它

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

});