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类，并在你到达航点时再次添加它。

粘性导航的奇怪问题

1 个答案: