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");
});
});
저도 같은 문제에 봉착하고이 솔루션이 해결되지 않았다. 아직 답을 찾지 못하셨습니까? – romeovs