add and remove function not working in jquery

Question

I tried to add a secondary navigation bar that is fixed to the top-right of the webpage created and only appears when we scroll the page little bit down. this navigation is contained in the "sticky" class. the code and syntax seems to be right. but this bar is not hiding itself when the webpage is on the initial stage. its always there. I only want it to appear when the webpage is being scrolled down. pls help me fix this.

$(document).ready(function() {

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

        }
    });
});

Answer 1

I figured it out. I am posting this answer to only let people know what the actual problem is in my code.

<nav class = "sticky">

i defined my secondary nav class to the main nav permanently. that`s why the "sticky nav bar was always on the top of my website.

Answer 2

Consider the following example.

$(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>

See More: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

It's unclear from your example what .waypoint() is. I have to guess it's some callback event for a map element. There is also no specific reference, just "down", which I assume is in reference to scroll direction. It's hard to know when your code would need to add the Class. I am guessing anyone the user triggers the down scroll.

I would suggest, if it's still not working, to check the console for errors. Maybe add console.log inside your callback, so you can see what value direction has. Maybe it never gets a value of down.