粘性導航的奇怪問題

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代碼來刪除頁面加載時的.sticky類，並在遇到航點時再次添加它。