Sticky Header JS Not Working

Question

I'm trying to use JS to get my header to become sticky once it reaches the top of the page using JQuery Waypoints. The issue is that it's not sticking. Any suggestions?

Here's selections from the code:

HTML:

<div id = 'top-container'>
   <div id = 'wrapper'>
       <div id = 'top-img'>
           <img src='top-img.png' width = "600" height = '115'>
       </div>
       <h1 id = 'top-slogan'>A Video Production Studio</h1>
       <div class = 'nav-container'>
           <nav>
               <div id = 'header-img'>
                   <img src='top-img.png' width = "450" height = '86.25'>
               </div>
               <div id = 'nav-items-container'>
                   <ul class = 'nav-items'>
                       <li class = 'nav-item'><a href='#'><b>w</b>hat</a></li>
                       <li class = 'nav-item'><a href='#'><b>h</b>ow</a></li>
                       <li class = 'nav-item'><a href='#'><b>w</b>hy</a></li>
                       <li class = 'nav-item'><a href='#'><b>w</b>here</a></li>
                       <li class = 'nav-item'><a href='#'><b>w</b>ho</a></li>
                   </ul>
               </div>
           </nav>
       </div>
   </div>
</div>

jQuery:

  $(function() {
        // Do our DOM lookups beforehand
        var nav_container = $(".nav-container");
        var nav = $("nav");
        nav_container.waypoint({
            handler: function(event, direction) {
                nav.toggleClass('sticky', direction=='down');
            }
        });
    });

CSS:

.sticky {
    position: fixed;
    top: 0;
}

Answer 1

The handler you're passing in to .waypoint() has the wrong signature. direction is the first and only parameter. It should look like this:

handler: function(direction) {
    nav.toggleClass('sticky', direction=='down');
}