Mootools Scroll + jQuery를 사용하여 Nav Anchor Links를 강조하는 한 페이지 사이트?

Question

좋아요, 제 문제를 푸는 데 약 2 인치 정도 걸리므로 진행 방법을 모르겠습니다.

데브 사이트 : 나는 한 페이지 사이트를 만들 동일한 페이지에 Mootools의와 jQuery를 사용하고 http://www.kendraschaefer.com/meilin

. Mootools는 페이지 스크롤을 처리합니다. 지정된 div 내에서 페이지가 위아래로 스크롤됩니다.

Jquery는 다른 모든 효과를 처리합니다.

문제는 탐색 모음입니다. 현재 div가 현재 활성화되어 있는지를 기준으로 탐색 항목을 강조하려고합니다.

나는 마지막으로 그것은 아주 그것을 잘라하지 않습니다 실현하기 전에 다음과 같은 솔루션에 정착

:

• Mootools의이
• jQuery를 클릭 상관 없음 탐색 항목에 "현재"클래스를 할당 스크롤 처리하고 제거 다른 탐색 항목에서 "현재"클래스입니다.

문제 : 인 페이지 링크가 어떤 방식 으로든 탐색에 연결되지 않아서 이제 인 페이지 링크를 만들 수 없습니다. 예를 들어 "집"페이지에서 콘텐츠 영역의 "직장"또는 "팀"버튼을 클릭하십시오. 적절한 탐색 항목이 선택되지 않았으며 그 작업을 수행하는 방법을 알지 못합니다.

스크롤을 적용한 후에 클래스 할당을 Mootools를 통해 추가해야할까요? (방법을 알고 있다면 공유하십시오!)

아니면 Jquery를 수정해야합니까?

모든 솔루션 환영합니다! 감사!

Answer 1

var scroll = new Fx.Scroll('contentouter', { 
    duration: 1000, 
    wait: false, 
    offset: { 
     'x': -200, 
     'y': -40 
    }, 
    onStart: function() { 
     // do it here str after click and before scroll 
     $$("a.current").removeClass("current"); 
     if (this.triggerEl) 
      this.triggerEl.addClass("current"); 
    }, 
    onComplete: function() { 
     // or have it here after the scroll is done 

    }, 
    transition: Fx.Transitions.Quad.easeInOut 
}); 

var scrollableLinks = $$("a").filter(function(link) { 
    var href = link.getProperty("href"); 
    return href && href.contains("#") && href.replace("#", '').length; 
}); 

scrollableLinks.each(function(el) { 
    el.addEvents({ 
     click: function(e) { 
      new Event(e).stop(); 
      scroll.triggerEl = this; 
      scroll.toElement(this.getProperty("href").replace("#", '')); 
     } 
    }); 
}); 

scrollableLinks은 HREF가있는 모든 페이지의 링크를 가져 오기 위해 현재 마크와 함께 작동하며 #를 포함하고 그렇지 않아 그냥 1.2과 같은 최신 버전의

#

, 1.3 방금에 적용했습니다 수 그래서 같은 모든 앵커 링크 :

document.getElements("a[href~=#]")

또 다른 방법은 간단한 '탐색'클래스를 만드는 것입니다, 당신은 탐색 사람의 역할을 할 수있는 링크를 원하는 경우, 단순히 <a href="#about" class="nav">about us</a>을 - 일반적인 포괄 일 ~ 할 수도있다. 규칙적인 앵커를 갖는 것은 어렵습니다.

업데이트 된 예 : http://www.jsfiddle.net/dimitar/WkTzr/6/ 첫 번째 컨테이너의 TEAM 이미지는 최상위 메뉴 링크를 복제하는 링크입니다.