添加和删除jquery中不工作的函数

Question

我试图添加一个次要导航条，它是固定在创建的网页的右上角，只有当我们向下滚动页面时才会出现。此导航包含在“粘滞”类中。代码和语法似乎是正确的。但是，当网页处于初始阶段时，这个栏并没有隐藏自己。它总是在那里。我只希望它出现时，网页是向下滚动。请帮我把这个修好。

$(document).ready(function() {

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

        }
    });
});

Answer 1

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

<nav class = "sticky">

我把我的二级导航课程永久地定义为主导航。这就是为什么“粘性导航条总是在我的网站顶部。

Answer 2

考虑下面的例子。

​

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