Sticky Header JS Not Working

Question

Я пытаюсь использовать JS, чтобы мой заголовок стал липким, когда он достиг вершины страницы с помощью JQuery Waypoints. Проблема в том, что это не прилипает. Какие-либо предложения?

Вот отрывки из кода:

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

Обработчик вы передаете, чтобы. waypoint() имеет неправильный знак ature. direction - первый и единственный параметр. Это должно выглядеть так:

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