addClass를 클릭하여 링크 한 다음 스크롤을 고정하십시오. 위로 링크를 클릭하십시오.

Question

아래 내용에 대한 필터 역할을하는 링크 목록이 정렬되어 있지 않습니다.

링크 1 개 링크 2 링크 의 클릭에 3 링크 4

어떤 링크, 클래스 "활성은"링크를 클릭 추가됩니다. 이것은 완벽하게 작동합니다.

링크 1 링크 2 링크 3 (활성) 링크 4

하지만 페이지를 아래로 스크롤하면, 해당 링크는보기를 벗어나, 그래서 "활성"링크가 상단에 충실 할 다른 클래스 "fixednav"를 추가하여

링크 3 (활성) +

는 ** 나는 기본적으로 활성 클릭 바이올린 처음있는 이러한 두 가지를 결합해야합니다 (스크롤에 나는 정상에 충실 이 활성 링크를 원하는) :

를

http://jsfiddle.net/m35dB/1/

http://jsfiddle.net/zq9hd/ **

내가 이것을 쓰는 것이 있습니까?

"Uncaught TypeError :"활성 "클래스의 속성 'undefined of top'을 읽을 수 없습니다. 아직 필터를 클릭하지 않았기 때문에 존재하지 않습니다.

필터 코드 :

$('#filters a').click(function(){ 

    if($(this).is('.active')) { 
     // don't do anything while class is active 
    } 
    else { 
     $('#filters a').removeClass('active'), 
     $(this).addClass('active'); 
    } 

}); 

스크롤 코드 :

function fixDiv() { 
    var $div = $(".active"); 
    if ($(window).scrollTop() > $div.data("top")) { 
     $('.active').addClass('fixednav'); 
    } 
    else { 
     $('.active').removeClass('fixednav'); 
    } 
} 

$(".active").data("top", $(".active").offset().top); 
$(window).scroll(fixDiv); 

Answer 1

은 다음과 같이 당신의 클릭 기능 내부에 $(".active").data("top", $(".active").offset().top); 이동하십시오 :

코드의 나머지 부분과 관련이 라인은

$('#filters a').click(function(){ 
    var $this = $(this); 
    if(!$this.is('.active')) 
    { 
     $('#filters a').removeClass('active').removeData("top"); 
     $this.addClass('active').data("top", $this.offset().top); 
    } 
}); 

Answer 2

음, $('.active') 요소의 집합이 아니라 하나의 요소를 반환합니다.

$('.active:first')과 같은 것을 사용해보세요.