jQuery 탐색 클래스의 활성 클래스가 변경되지 않음

Question

비슷한 질문을 통해 검색 한 결과 아무 것도 쓸모가 없었습니다.

사용자가 내 한 페이지짜리 사이트의 해당 섹션으로 스크롤 할 때 내 페이지 탐색 내 링크에 ".active"클래스를 추가하려고합니다. 사용자가 스크롤을 계속하면 해당 활성 클래스가 링크에서 사라지고 다음 링크에 추가됩니다.

스크롤을위한 jQuery가 코드에서 작동하지만 다른 것은없는 것처럼 보입니다.

HTML :

<ul id="nav"> 
    <li><a href="#about">ABOUT</a></li> 
    <li><a href="#team">TEAM</a></li> 
    <li><a href="#portfolio">PORTFOLIO</a></li> 
    <li><a href="#process">PROCESS</a></li> 
    <li><a href="#brands">BRANDS</a></li> 
    <li><a href="#press">PRESS</a></li> 
    <li><a href="#blog">BLOG</a></li> 
    <li><a href="#meetup">MEETUP</a></li> 
    <li><a href="#contact">CONTACT</a></li> 
</ul> 

<section> 
    <a id="about">Header</a> 
Some Text 
</section> 
<section> 
    <a id="team">Header</a> 
Some Text 
</section> 
<section> 
    <a id="portfolio">Header</a> 
Some Text 
</section> 

jQuery를 : (단축) 코드의 섹션 여기에 http://tendigi.com/staging/

그리고 다음은

내 사이트

// Cache selectors 
var lastId, 
topMenu = $("#nav"), 
topMenuHeight = topMenu.outerHeight()+75, 
// 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; } 
}), 
noScrollAction = false; 

// 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; 
noScrollAction = true; 
$('html, body').stop().animate({ 
    scrollTop: offsetTop 
},{ 
    duration: 300, 
    complete: function() { 
     menuItems 
      .parent().removeClass("active") 
      .end().filter("[href=" + href +"]").parent().addClass("active"); 
     setTimeout(function(){ noScrollAction = false; }, 10); 
    } 
}); 
e.preventDefault(); 
}); 

// Bind to scroll 
$(window).scroll(function(){ 
if(!noScrollAction){ 
    // 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"); 
    } 
    }  
});​ 

이것은 내 stackoverflow에 대한 첫 번째 질문, 그래서 내가 제대로하고 있지 않다면 사과드립니다! 도움이 너무 좋습니다.

감사합니다.

Answer 1

나는 이것이 작동하는 것을 볼 수 있습니다. 활성 링크가 <li />에 적용되고 있습니다.

.end().filter("[href=" + href +"]").parent().addClass("active"); 

에 :

.end().filter("[href=" + href +"]").addClass("active"); 

희망하는 데 도움이 당신은 <a /> 변경이에 필요한 경우!

편집

으악를! 이전에 행을 변경해야합니다. 그래서는 다음과 같습니다

.parent().removeClass("active") 
.end().filter("[href=" + href +"]").parent().addClass("active"); 

에 :

.removeClass("active") 
.filter("[href=" + href +"]").addClass("active"); 

---

당신이 5 ~ 6 픽셀하여 임계 값을 조정할 필요가있다처럼 당신은 또한 본다 ...