2012-10-08 3 views
2

jQuery 중간 점 플러그인과 scrollTo 플러그인을 사용하여 고정 헤더 등을 얻는 페이지가 있습니다 (http : /webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/).앵커 및 메뉴 활성 스타일이있는 페이지에서 jQuery 웨이 포인트를 비활성화하고 복원하는 방법

나는 모든 것이 잘 작동하지만 하위 메뉴에서 볼 수있는 동작을 실행했습니다. 페이지의 아래쪽에있는 div에 해당하는 링크를 클릭하면 페이지가 div 및 메뉴에 맞게 스크롤됩니다 'selected'클래스 스타일로 업데이트합니다. 그러나 페이지가 다른 div를지나 스크롤되기 때문에 페이지는 과거 스크롤 할 때마다 활성화 된 각 메뉴 항목을 통해 움직입니다. 페이지를 해당 div로 이동하자마자이 함수를 제거한 다음 복원하여 활성 메뉴 링크의 애니메이션을 제거 할 수 있기를 바랍니다. 당신은 내가 여기서 말하고있는 것을 볼 수 있습니다 (부 메뉴에서 셔틀 드라이버 나 안내 원과 같은 링크를 클릭하면됩니다).

http://pinnacleahs.com/?page_id=8

나는 웨이 포인트 플러그인의 제거() 메소드가 있다는 것을 알고 있지만, 나는 그것을 복원하는 방법을 모르겠습니다. 또한 같은 목적을 달성하기위한 대체 방법이있을 수도 있습니다.

내 기능은 다음과 같습니다

$(function() { 
// Do our DOM lookups beforehand 
var nav_container = $(".navContainer"); 
var nav = $(".navStickyHolder"); 
nav_container.waypoint({ 
handler: function(event, direction) { 
nav.toggleClass('sticky', direction=='down'); 
if (direction == 'down'){ 
nav_container.css({ 'height':nav.outerHeight() }); 
} else { 
nav_container.css({ 'height':'auto' }); 
} 
}, 
offset: 177 
}); 

var sections = $(".servicePanel"); 
var navigation_links = $(".servicesNavigation li a"); 
sections.waypoint({ 
    handler: function(event, direction) { 
    var active_section; 
    active_section = $(this); 
    if (direction === "up") active_section = active_section.prev(); 

     var active_link = $('.servicesNavigation li a[href="#' + active_section.attr("id") + '"]'); 
     navigation_links.removeClass("selected"); 
     active_link.addClass("selected"); 

    }, offset: 295 
}) 



navigation_links.click(function(event) { 

     $.scrollTo(
     $(this).attr("href"), 
     { 
      duration: 300, 
      offset: { 'left':0, 'top': -240 } 
     } 
    ); 

    navigation_links.removeClass("selected"); 
    $(this).addClass("selected"); 

     }); 
     }); 
+0

저도 같은 문제에 봉착하고이 솔루션이 해결되지 않았다. 아직 답을 찾지 못하셨습니까? – romeovs

답변

1

안녕 당신이 here에서 중간 점의 최신 버전을 사용하고 있습니까? 당신은 중간 점 옵션

예를 들어, "거짓"으로 "연속"정의해야

$('.div') 
    .waypoint(function(direction){ 
    if (direction === 'down') { 
     do stuff 
    } //endif 
    },{ 
     offset: '10px', 
     continuous: false 
    }) 
    .waypoint(function(direction){ 
    if (direction === 'up') { 
    do stuff 
    } //endif 
    },{ 
     offset: '10px', 
     continuous: false 
    }); 
});