粘滞标头JS不工作

Question

我想使用JS来让我的头一旦到达使用JQuery Waypoint的页面顶部就变得粘滞。问题在于它并不坚持。有什么建议么？

下面是从代码选择：

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'); 
}