스티키 탐색 바 기능

Question

jQuery 웨이 포인트를 사용하여 끈적한 탐색 모음을 만들려고합니다. 나는 자바에 관한 톤을 모른다. 그래서 나는 예제들로부터 하나의 조각을 만들려고 노력하고있다.

$(document).ready(function() { 
    $('.top').addClass('hidden'); 
    $.waypoints.settings.scrollThrottle = 30; 
    $('#mainnav').waypoint(function(event, direction) { 
     $('.top').toggleClass('hidden', direction === "up"); 
    }, { 
     offset: '-100%' 
    }).find('#myNavigation').waypoint(function(event, direction) { 
     $(this).parent().toggleClass('sticky', direction === "down"); 
     event.stopPropagation(); 
    }); 
}); 

나는 당신의 도움을 모두 감사 : 내가 설정을 가지고

<section id="nav"> 

    <div class="container"> 
     <div id="mainnav"> 
      <nav id="myNavigation" class="horizontal_nav pageScrollerNav topNav sixteen columns alpha"> 
       <ul> 
        <li><a href="#"><i class="icon-home"></i> Home</a></li> 
        <li><a href="#"><i class="icon-picture"></i> Portfolio</a></li> 
        <li><a href="#"><i class="icon-list-ul"></i> Services</a></li> 
        <li><a href="#"><i class="icon-comments"></i> Contact</a></li> 
        <li><a href="#"><i class="icon-rss"></i> Follow Me</a></li> 
       </ul> 
      </nav> 
     </div> <!--end mainnav--> 
    </div> <!--end nav-container--> 

</section> <!--end nav--> 

그리고 여기에 jQuery를이다 : 여기

내가 사용하고 탐색입니다! 그래서 (트위터의 부트 스트랩 문서 페이지 용으로 작성된 코드에서 수정)처럼

.nav-fixed { 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

당신은 어떤 jQuery를 작성할 수 있습니다

Answer 1

당신은 같은 클래스가 가정. 탐색 요소를 모니터링합니다. 화면 상단에 도달하면 nav-fixed 클래스가 생성되어 요소를 페이지의 왼쪽 상단 모서리에 고정시킵니다.

귀하의 웨이 포인트 플러그인을 사용하기 위해 필요에 따라이 코드를 수정할 수 있습니다.