2012-06-16 4 views
0

내가 스크롤의 다른 목록 항목을 강조하기 위해 노력하고있어하지만이 워드 프레스 설치에 포팅하는 것이 내가 지금 동작하지 않습니다 활성 .. 스크롤

여기에 내 현재 메뉴의

:

<div id="navigation"> 
    <ul> 
     <li class="nav1"> 
      <a href="#post-31"></a> 
     </li> 
     <li class="nav2"> 
      <a href="#post-28"></a> 
     </li> 
     <li class="nav3"> 
      <a href="#post-17"></a> 
     </li> 
     <li class="nav4"> 
      <a href="#post-12"></a> 
     </li> 
     <li class="nav5"> 
      <a href="#post-5"></a> 
     </li> 
     <li class="nav6"> 
      <a href="#post-1"></a> 
     </li> 
    </ul> 
</div> 

그리고 여기에 자바 스크립트입니다 : 내가 스크립트를 말할 수

//#### Change Active Menu Item 
// Cache selectors 
var lastId, 
    topMenu = $("#navigation ul"), 
    topMenuHeight = topMenu.outerHeight()+15, 
    // All list items 
    menuItems = topMenu.find("a"), 
    // Anchors corresponding to menu items 
    scrollItems = menuItems.map(function(){ 
     var item = $($(this).attr("href")); 
     if (item.length) { return item; } 
    }); 

// Bind click handler to menu items 
// so we can get a fancy scroll animation 
menuItems.click(function(e){ 
    var href = $(this).attr("href"), 
     offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1; 
    //$('html, body').stop().animate({ scrollTop: offsetTop }, 300); 
    e.preventDefault(); 
}); 

// Bind to scroll 
$(window).scroll(function(){ 
    // Get container scroll position 
    var fromTop = $(this).scrollTop()+topMenuHeight; 

    // Get id of current scroll item 
    var cur = scrollItems.map(function(){ 
    if ($(this).offset().top < fromTop) 
     return this; 
    }); 
    // Get the id of the current element 
    cur = cur[cur.length-1]; 
    var id = cur && cur.length ? cur[0].id : ""; 

    if (lastId !== id) { 
     lastId = id; 
     // Set/remove active class 
     menuItems 
     .parent().removeClass("active") 
     .end().filter("[href=#"+id+"]").parent().addClass("active"); 
    }     
}); 

종류의는 # 포스트 (1) 목록 항목에 활성 클래스를두고 스크롤 할 때부터 노력하고 있습니다,하지만에서 이동하지 않습니다 그곳에.

코드에 잘못된 내용이 표시 될 수 있습니까?

+0

혹시 jsfiddle로 이것을 할 수있어서 주위에서 놀 수 있습니다. – Alex

+0

@Alex 아마, 내가 가지고있는 문제는 정적 사이트에서 잘 작동한다는 것입니다. 하지만 문제가 시작된 WordPress 테마에 추가했을 때 .. 사용자 정의 JS 파일에서 "$"를 모두 "jQuery"로 변환했지만 여전히 제대로 작동하지 않습니다. 자바 스크립트가 충돌하는지 확인하는 방법이 있습니다. WordPress에 뭐든지? –

+0

@JoeBobby, 좋은 방법은 실제로 jsfiddle에 게시 할 수 있습니다. REAL htm 출력으로 시작한 다음 js를 추가하십시오. 작동하면 문제가 충돌 할 수 있습니다. 그렇지 않은 경우 문제는 js에 있으며 WP의 나머지 부분과 관련이 없습니다. 정적 HTML 코드가 WP의 출력과 100 % 동일 했습니까? – Gavriel

답변

0

메뉴에 'order'=> 'ASC'를 추가하면 제대로 작동하는 것으로 보입니다. 왜 그런지는 모르겠지만 지금은 작동하지 않습니다.

관련 문제