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

问题描述

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

$(document).ready(function() {

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

        }
    });
});

解决方法

考虑以下示例。

$(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 的值。

,

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

<nav class = "sticky">

我将辅助导航类永久定义为主导航。这就是“粘性导航栏始终位于我网站顶部的原因。