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（）的处理程序具有错误的签名。 direction是第一个也是唯一的参数。它应该是这样的：

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

Sticky Header JS无效

1 个答案: