스티커 헤더 JS가 작동하지 않습니다.

Question

JQuery 웨이 포인트를 사용하여 페이지 상단에 도달하면 JS를 사용하여 헤더가 끈적 해 지도록합니다. 문제는 그것이 고집스럽지 않다는 것입니다. 어떤 제안?

다음은 코드에서 선택의 :

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

당신이에 전달하는 핸들러. 중간 점()에 잘못된 기호가 있습니다. ature. direction이 첫 번째이자 유일한 매개 변수입니다. 다음과 같이 표시되어야합니다.