添加和删​​除功能在jquery中不起作用

Question

我尝试添加一个辅助导航栏，该导航栏固定在所创建网页的右上角，并且仅在我们向下滚动页面时才会出现。此导航包含在“粘性”类中。代码和语法似乎是正确的。但是当网页处于初始阶段时，此栏不会自行隐藏。它总是在那里。我只希望它在向下滚动网页时出现。请帮我解决这个问题。

$(document).ready(function() {

    $('.js--section-features').waypoint(function(direction) {
        if (direction == 'down') {
            $('nav').addClass('sticky');
        } else {
            $('nav').removeClass('sticky');

        }
    });
});

Answer 1

考虑以下示例。

$(function() {
  var navbar = $("nav");
  var sticky = navbar.offset().top;

  function addSticky() {
    if (window.pageYOffset >= sticky) {
      navbar.addClass("sticky")
    } else {
      navbar.removeClass("sticky");
    }
  }

  $(window).scroll(addSticky);
});

body {
  margin: 0;
  padding: 0;
}

.row {
  height: 100px;
}

nav {
  overflow: hidden;
  background-color: #333;
  margin: 0;
}

nav.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

nav.hidden {
  display: none;
}

nav ul {
  list-style: none;
  margin: 0;
}

nav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <img src="resources/images/logo-white.png" alt="omnifood logo" class="logo">
  <img src="resources/images/logo.png" alt="omnifood logo" class="logo-black">
</div>
<nav>
  <ul class="main-nav">
    <li><a href="#">Food delivery</a></li>
    <li><a href="#">how it works</a></li>
    <li><a href="#">Our cities</a></li>
    <li><a href="#">Sign-up</a></li>
  </ul>
</nav>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius convallis turpis, semper varius lacus tincidunt eget. Ut in risus enim. Pellentesque consectetur leo at turpis malesuada pulvinar. Fusce venenatis lacinia hendrerit. Donec
    quis lobortis justo. Duis suscipit neque ac justo blandit, ut egestas odio cursus. Donec porta ultricies nisi, id dictum purus ultrices et. Morbi tempor, purus at interdum blandit, sapien dui varius metus, quis euismod odio nunc facilisis nisl.</p>
  <p>Morbi malesuada ornare suscipit. Proin in commodo urna, id tempor enim. Nullam egestas purus dictum nisi varius, et blandit metus lobortis. Mauris quis tellus ligula. Praesent tristique dictum massa, et blandit lectus hendrerit eget. Duis eget elementum
    turpis. Vivamus efficitur sed arcu condimentum consequat. Suspendisse id tortor in velit venenatis congue. Proin non arcu quis nunc consectetur dignissim.</p>
  <p>In pretium feugiat vulputate. Praesent feugiat eleifend lacus, eu euismod ante posuere ac. Morbi erat massa, tempor eu ex blandit, iaculis eleifend sem. Etiam quis velit ut dolor auctor imperdiet. Ut egestas malesuada metus et convallis. Praesent ut
    finibus sapien. In quis enim in dui tristique cursus semper quis ligula. Nullam quis molestie lacus, et viverra mauris. Sed nec rhoncus lectus. Donec aliquam, neque ut hendrerit ultricies, tortor ex rutrum nunc, quis imperdiet ipsum lacus quis purus.
    Pellentesque elementum lacinia elit, sit amet semper neque luctus vel.</p>
  <p>Fusce malesuada nunc consectetur nisi vestibulum, et rutrum velit malesuada. Phasellus rutrum erat a felis sollicitudin, vitae luctus enim dignissim. Donec sagittis consequat metus. Quisque gravida magna vulputate sapien consectetur varius. Proin commodo
    viverra convallis. Morbi ac commodo eros. Sed ornare eros ac nisi maximus efficitur. Aliquam at blandit risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ac sapien eget lorem luctus porta. Etiam
    eget sem sodales, viverra tellus at, placerat lorem. Etiam convallis, erat at hendrerit pretium, lorem dui efficitur arcu, nec fermentum lacus quam nec mauris.</p>
  <p>Ut ac tortor urna. Nullam vulputate auctor consectetur. In vehicula mauris sit amet nunc pellentesque, eu dapibus ligula tincidunt. Aenean in cursus augue, vel blandit leo. Proin scelerisque sem erat. Nunc magna dui, consectetur id est non, vestibulum
    vestibulum metus. Aliquam semper nisi augue. Proin diam sapien, euismod eget maximus eu, commodo in libero. Nam nec dui tellus. Aliquam eu suscipit quam. Fusce vehicula lorem et velit finibus congue. Sed a urna diam. Pellentesque dignissim risus in
    magna semper malesuada. Sed sagittis et tortor sed rhoncus. Fusce ac enim in urna lobortis auctor vitae sed lorem.</p>
</div>

查看更多：https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

从您的示例中不清楚.waypoint() 是什么。我不得不猜测这是地图元素的一些回调事件。也没有具体的参考，只有"down"，我认为这是参考滚动方向。很难知道您的代码何时需要添加该类。我猜是用户触发了down 滚动。

如果仍然无法正常工作，我建议您检查控制台是否有错误。也许在你的回调中添加console.log，这样你就可以看到direction 有什么值。也许它永远不会得到down 的值。

Answer 2

我想通了。我发布这个答案只是为了让人们知道我的代码中的实际问题。

<nav class = "sticky">

我将我的辅助导航类永久定义为主导航。这就是为什么“粘性导航栏总是在我的网站顶部。